html Flexbox订单属性是什么？

snvhrwxg 于 12个月前发布在其他

关注(0)|答案(1)|浏览(90)

CSS display: flexbox;的flex-items order有属性。我不确定这个属性是什么。这和separation of concerns的概念不冲突吗？
类似于HTML的dir属性与CSS的direction:rtl;如果HTML dir比CSS direction:rtl更appropriate，那么有理由认为流，结构和方向性也是如此。
因为方向性是文档结构的一个组成部分，所以应该使用标记来设置文档或信息块的方向性，或者识别文本中仅使用Unicode双向算法不足以实现所需方向性的地方。因此，你应该使用专用的bidi标记，只要它是可用的。不要简单地将CSS样式附加到一个一般的元素来实现效果。

Direction (LTR/RTL): What's the difference between the CSS direction and HTML direction attribute?
我不是在抱怨，我刚做了一个项目，在这个项目中，修改order比编辑HTML更容易。但问题仍然存在。

Html

来源：https://stackoverflow.com/questions/77680990/what-is-the-flexbox-order-property-for

1条答案

按热度按时间

c2e8gylq1#

order属性旨在允许您将页面的相关内容（这是某人首先出现在页面上的原因）放在DOM中的第一位，同时仍然实现某些布局，如“圣杯”布局（页眉，内容，页脚，内容两侧的侧边栏），而无需采用非常笨拙的技巧。
根据W3C Flexbox规范：
许多网页的标记都有类似的形状，顶部是页眉，底部是页脚，然后是内容区域和中间的一个或两个附加列。通常，在页面的源代码中，内容最好排在附加列之前。然而，这使得许多常见的设计，例如简单地将附加列放在左边，内容区域放在右边，很难实现。多年来，这已经通过许多方式解决了，当有两个额外的列时，通常被称为“圣杯布局”。顺序使这个变得微不足道。例如，以下面的页面代码和所需布局的草图为例：

<!DOCTYPE html>
<header>...</header>
<main>
  <article>...</article>
  <nav>...</nav>
  <aside>...</aside>
</main>
<footer>...</footer>

字符串
x1c 0d1x的数据
这种布局可以通过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; }

型
这允许更快地加载内容，这是用户体验的直接关注点。
巧合的是，它也使得为移动的或响应式布局重新排序flex元素变得非常容易。我写这个答案是为了说明 * 通过CSS* 来做这件事是多么微不足道。改变DOM顺序本身将需要基于不同顺序的条件的不同HTML页面，或者JavaScript。在任何一种情况下，它可能会破坏用户可能拥有的依赖于DOM结构的辅助技术或用户脚本。与只需要编写一次的CSS相比，维护DOM结构也更复杂/更费力。
但这与关注点分离不冲突吗？
不，HTML关注的是内容。CSS关注的是呈现。兄弟元素在页面上呈现的 * 顺序 * 是一个呈现问题，与它们是否应该水平显示、垂直显示、居中或侧对齐等没有什么不同。
有关进一步的阅读，请参阅：MDN上order的用例

赞(0）回复(0）举报 12个月前

我来回答

html Flexbox订单属性是什么？

1条答案

相关问题

热门标签

最新问答