什么是Flexbox
Flexbox 是 CSS3 引入的一种弹性盒模型布局方式，可以在不同屏幕分辨率下轻松地组织和分配容器内的子元素。 它提供了一个简单而灵活的方法，以确保元素对齐和布局在所有设备上表现一致。
在 Flexbox 中，一个元素可以设置为弹性容器，其子元素按照一定的规则排列。弹性容器可以在水平或垂直方向上展示所有子元素以便在任何屏幕大小下都能显示完整的内容。
子容器排列顺序问题
在 Flexbox 中，我们会发现子元素在容器内的排列顺序会影响到页面布局的呈现效果。默认情况下，子元素的排列顺序是按照代码顺序排列的，这可能会导致一些不必要的页面跳动问题。
例如，如果我们有一个弹性容器，并且里面有三个子元素：A、B 和 C，在默认情况下，他们将按照 ABC 的顺序排列。但如果我们希望排列顺序为 BAC，该如何处理呢？传统的做法是通过改变 DOM 结构来实现排列顺序，但这往往不具可维护性。
子容器的 order 属性
为了解决这个问题，我们可以使用 order 属性来改变子元素的排列顺序。order 属性的默认值为 0，值越小，元素越先排在前面。
下面是一个例子，我们首先定义一个弹性容器并设置其 flex-wrap: wrap 来创建了一个自动换行的排列。然后，我们设置三个子元素的不同顺序，通过改变 order 属性，使得元素的排列顺序发生变化。
---------- - -------- ----- ---------- ----- ---------------- ------- ------------ ------- ------- ------ - ------- - ----------------- -------- ------ ------ ------- ------ ------ -- - ------- - ----------------- -------- ------ ------ ------- ------ ------ -- - ------- - ----------------- -------- ------ ------ ------- ------ ------ -- -
Flexbox 的弹性容器
通过以上示例可以看出，Flexbox 提供了一种灵活的方法来排列子元素，同时它对响应式设计和自适应布局也有很大的用处。除了 order 属性，还有其他许多属性可以帮助我们在 Flexbox 中进行容器元素的布局。下面是一些示例：
justify-content 属性
justify-content 属性定义了容器中子元素沿着主轴的对齐方式，它可以使用各种可用的值，如：flex-start, flex-end, center, space-between, space-around 等。
align-items 属性
align-items 属性定义了容器中子元素在交叉轴上的对齐方式，它可以使用各种可用的值，如：flex-start, flex-end, center, stretch 等。
flex-wrap 属性
flex-wrap 属性定义了容器中子元素的排列方式，如果子元素的总宽度超过了容器的宽度，则会自动换行，它可以使用各种可用的值，如：nowrap, wrap, wrap-reverse 等。
总结
Flexbox 提供了一个新的布局方式，使我们可以更方便地在一定程度上控制页面布局效果，例如排列次序，对齐方式，换行方式等。本文通过介绍子容器排列顺序问题，及其解决方案 order 属性，并根据实际情况给出了示例代码及其说明，希望能对初学者们有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64aa90e948841e98946ab947