Flexbox：内联为 html 属性还是 CSS 类？

Question

弹性框 "inlined" 作为 html 属性：(sample taken from LumX website):

<div flex-container="row">
    <div flex-item>
        <lx-text-field label="Company" disabled="true">
            <input type="text" ng-model="textFields.disabled" ng-disabled="true">
        </lx-text-field>
    </div>
</div>

或作为 CSS 属性：

  display: flex;
  flex-direction: row;

推荐使用 flexbox 的方式是什么？作为 css 类或 html 属性？

Answer 1

我认为这是一个有点 subjective/relative 的问题，因为它可能有点偏好问题。也就是说，这是我第一次看到内联 Flexbox；我在 Flexbox 上看到的所有帖子、教程等都是使用 CSS 属性制作的。

似乎常见的做法是使用CSS。我想出这样做的两个原因：

关注点分离：通常不鼓励内联 CSS，因为它会混淆内容 (HTML) 和表示 (CSS)。将它们分开，更容易维护和修改站点。
自定义更改：例如，您可能需要根据屏幕尺寸使用不同的布局（使用 媒体查询 ）或您可能需要使用供应商前缀来支持浏览器。在这两种情况下，使用单独的 CSS 代码比使用内联 HTML.

Flexbox：内联为 html 属性还是 CSS 类？

Flexbox: inline as html attributes or as CSS classes?

html

css

flexbox