Flexbox 订单属性有什么用？

Question

CSS

display: flexbox;

具有其弹性项目

order

的属性。我不确定这个属性是做什么用的。这和关注点分离的概念不冲突吗？

类似于 HTML 的

dir

属性与 CSS

direction:rtl

；如果 HTML

dir

比 CSS direction:rtl 更

合适

，那么按理说，流程、结构和方向性也是如此。

由于方向性是文档结构的一个组成部分，因此应使用标记来设置文档或信息块的方向性，或者识别文本中仅使用 Unicode 双向算法不足以实现所需方向性的位置。 [...] 因此，只要可用，您就应该使用专用的 bidi 标记。不要简单地将 CSS 样式附加到一般元素来实现效果。

- 方向（LTR/RTL）：CSS 方向和 HTML 方向属性有什么区别？

并不是我在抱怨；而是我在抱怨。我刚刚有一个项目，只需更改

order

就非常容易，而不是编辑 HTML。但问题仍然存在。

Answer 1

order

属性旨在允许您将页面的相关内容（某人表面上首先出现在页面上的原因）首先放置在 DOM 中，同时仍然实现某些布局，例如“圣杯”布局（页眉、内容、页脚，内容两侧都有侧边栏），而无需采取非常尴尬的技巧。

来自 W3C Flexbox 规范：

许多网页的标记具有类似的形状，顶部是页眉，底部是页脚，然后是内容区域和中间的一两个附加列。一般来说，内容最好出现在页面源代码中，位于附加列之前。然而，这使得许多常见的设计（例如简单地在左侧添加附加列和在右侧添加内容区域）变得难以实现。多年来，人们已经通过多种方式解决了这个问题，当有两个附加列时，通常被称为“圣杯布局”。顺序使这变得微不足道。例如，采用以下页面代码和所需布局的草图：
<!DOCTYPE html>
<header>...</header>
<main>
  <article>...</article>
  <nav>...</nav>
  <aside>...</aside>
</main>
<footer>...</footer>
这个布局可以通过flex布局轻松实现：
main { display: flex; }
main > article { order: 2; min-width: 12em; flex:1; }
main > nav     { order: 1; width: 200px; }
main > aside   { order: 3; width: 200px; }

这样可以更快地加载内容，这直接关系到用户体验。

巧合的是，它还可以轻松地为移动或响应式布局重新排序弹性元素。我写这个答案是为了说明通过 CSS 做到这一点是多么微不足道。更改 DOM 顺序本身需要根据不同顺序的条件使用不同的 HTML 页面或 JavaScript。无论哪种情况，它都可能破坏用户可能拥有的依赖于 DOM 结构的辅助技术或用户脚本。与只需编写一次的 CSS 相比，维护它也更复杂/更费力。

但这和关注点分离不冲突吗？

不，HTML 关心的是

内容

。 CSS 关注的是presentation。 同级元素在页面上的呈现顺序是一个呈现问题，与它们是否应该水平、垂直、居中或侧对齐等显示没有什么不同如需进一步阅读，请参阅：

MDN 上

order 的用例

Flexbox 订单属性有什么用？

问题描述投票：0回答：1

1个回答

最新问题

Flexbox 订单属性有什么用？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1