html - Flexbox:作为 html 属性或 CSS 类内联？

Question

作为 html 属性“内联”的 flexbox :(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

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

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

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