Flexbox 是一种弹性布局模型，它可以让容器中的子元素在可用的空间中进行自适应，并且非常适合在响应式设计中使用。在 Flexbox 中，如何指定横向与纵向的排序非常重要。本文将深入探索如何使用 Flexbox 实现横向与纵向的排列。
容器属性：flex-direction
Flexbox 容器的 flex-direction 属性指定子元素排列的方向。默认情况下，flex-direction 属性值为 row，即子元素从左到右依次排列。要实现从右向左排列，需将 flex-direction 属性值设置为 row-reverse。
-- -------------------- ---- ------- --------------- - -------- ----- --------------- ------------ - ---------- - ------ ------ ------- ------ ----------------- ------- ------- ----- -
<div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> </div>
在以上示例中，子元素的排列顺序从右到左。为了让子元素从下到上排列，可以将 flex-direction 属性值设置为 column-reverse。
子元素属性：order
与 flex-direction 属性不同，子元素属性 order 可以控制每个子元素在容器中所占的顺序。默认情况下，所有子元素都有相同的顺序值，但是可以使用 order 属性为某个子元素指定一个不同的顺序值。
.flex-item:nth-child(2) {
order: 1;
}在上例中，第二个子元素的 order 值为 1，其它子元素的 order 值为默认值 0。因此，第二个子元素会在容器中排列在第一个子元素的前面。可以使用 order 属性通过简单的数学计算来重排每个子元素的顺序。
容器属性：flex-wrap
在默认情况下，子元素会在容器中尽可能的拓展，直到容器的边界为止。如果希望子元素换行，可以使用 flex-wrap 属性。默认情况下，flex-wrap 属性值为 nowrap，表示所有子元素在容器中尽可能少的占用行数。要实现换行，需将 flex-wrap 属性值设置为 wrap。
-- -------------------- ---- ------- --------------- - -------- ----- ---------- ----- - ---------- - ------ ------ ------- ------ ----------------- ------- ------- ----- -
在以上示例中，容器中的每个子元素都以 150px 的宽度排列在同一行上。如果需要实现更多行，则可以根据需要添加更多子元素。
子元素属性：flex-basis
在 Flexbox 中，要指定子元素的宽度，可以使用 flex-basis 属性。在默认情况下，flex-basis 属性为 auto，这意味着在没有给子元素明确指定宽度的情况下，子元素会自动根据内容进行宽度计算。但在某些情况下，可以使用 flex-basis 属性定义子元素的宽度。
.flex-item {
flex-basis: 100px;
}在上例中，子元素的 flex-basis 属性值为 100px。换句话说，子元素的宽度为 100px。除了 flex-basis 属性，还可以使用 width 属性明确指定子元素的宽度。
结论
在使用 Flexbox 实现横向与纵向排列时，需要深入理解以下属性：flex-direction、order、flex-wrap 和 flex-basis。这些属性可帮助您更好地控制元素在容器中的位置和大小。通过对这些属性的深刻理解，可以轻松地在 Web 中实现各种布局。欲了解更多信息，请访问 MDN。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676e8a6ce9a7045d0d6b20a1