bootstrap-4 - Bootstrap Flex : What is the difference between row and flex-row, flex-sm-row 等

Question

我了解 flex sm、md、lg 列的概念，但不了解应用于行的概念。弹性行有什么作用？ sm、md、lg 尺寸应用于弹性行时意味着什么？

Answer 1

简答 - .row只是网格的容器 col .然而，flex-row , flex-column等。可用于任何 flexbox 元素(不仅仅是网格行和列)。

长答案

flexbox direction utility classes可用于响应式地改变 flexbox 子项的方向(无论子项是网格列还是其他内容)。有 4 个 flexbox 方向:行、行反转、列和列反转

例如，一个 flexbox parent <div>包含 4 个 child <span>元素。您可以让子项在 xs 上为列方向，在 sm 及以上为行方向:

<div class="d-flex flex-sm-row flex-column">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
</div>

当然，它们也可用于覆盖网格的默认弹性行方向 .row .例如，反转 lg 及以上的列顺序:

<div class="row flex-lg-row-reverse">
    <div class="col-sm-4">1</div>
    <div class="col-sm-4">2</div>
    <div class="col-sm-4">3</div>
</div>

演示:https://www.codeply.com/go/sSgebPyncz

另一种看待它的方式:

这些类用于响应式控制列宽度:
col-12 , col-lg-4 , col-md-5等等……

这些类用于响应式控制flexbox方向:
flex-row , flex-column , flex-md-row-reverse等等……