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

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

我正在与 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;
}

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

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

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

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

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

但是库所做的一切都可以在具有 CSS 的 flex boxes 中实现。