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

Question

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

我随机尝试了一些例子，但它们没有反射(reflect)出相同的结果。

First,

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

Second ,

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

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

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

Answer 1

使用该属性意味着您已经安装了 Angular flex layout library .

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

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

主要区别在于库提供的抽象:使用它，您可以访问更多显示选项(space-around、space-evenly、space-between ...)，你可以在元素之间使用一个间隙，你可以很容易地为你的应用程序实现断点。

但是这个库所做的一切都可以用 CSS 在 flex boxes 中实现。