时间戳

首页 > 解决方案 > 将 flex 作为属性或作为 angular 的 css 文件中的类实现有什么区别？

css - 将 flex 作为属性或作为 angular 的 css 文件中的类实现有什么区别？

问题描述

我正在处理一个有角度的项目以及有角度的材料。我想使用 flexbox 来控制布局。但我遇到了两种类型的实现。首先，直接将flex内容作为属性添加到div标签左右。其次，在 css 文件中声明一个单独的 css 类。两者有什么区别吗？

我随机尝试了一些例子，但它们并没有反映相同的结果。

First,

<div fxFlex flexLayout="row">
    //contents
</div>

Second ,

<div class="sample">
    //contents
</div>

//in css file
.sample
{
    display : flex;
    flex-directoin : row;
}

如果两者之间有任何显着差异，我想知道。如果没有，最好使用什么？

标签： cssangularflexboxangular-flex-layout

解决方案

使用该属性意味着您已经安装了Angular flex 布局库。

使用样式本身不需要任何依赖项（旧浏览器的 polyfill 除外）。

两者的最终结果应该没有区别。

主要区别在于库提供的抽象：使用它，您可以访问更多显示选项（space-around、space-evenly、space-between...），您可以使用元素之间的间隙，并且可以轻松地为您的应用程序实现断点。

但是这个库所做的一切都可以在带有 CSS 的弹性盒子中实现。

推荐阅读