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

Question

我正在与 angular material 一起处理一个 angular 项目。我想使用 flexbox 来控制 layout.But 我遇到过两种实现方式。首先，直接将 flex 内容作为属性添加到 div 标签左右。其次，在 css 文件中声明一个单独的 css class。两者有什么区别吗？

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

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 中实现。

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

is there any difference between implementing flex as an attribute or as an class in a css file for angular?

css

angular

flexbox

angular-flex-layout