Boostrap Flex：row 和 flex-row、flex-sm-row 等有什么区别

Question

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

Answer 1

Short Answer - .row is only a container for grid col. However, flex-row, flex-column, etc.. can be used for any flexbox elements (not just the grid rows and columns).

Long Answer

The flexbox direction utility classes can be used to responsively change the direction of flexbox children (regardless of the children being grid columns or other content). There are 4 flexbox directions: row, row-reverse, column and column-reverse

For example, a flexbox parent <div> that contains 4 child <span> elements. You can make the children column direction on xs, row direction on sm and up:

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

Of course they can also be used to override the default flex row direction of the grid .row. For example, reverse the column order on lg and up:

<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>

Demo: https://www.codeply.com/go/sSgebPyncz

Another way to look at it:

These classes are used to responsively control column width:
col-12, col-lg-4, col-md-5, etc...

These classes are used to responsively control flexbox direction:
flex-row, flex-column, flex-md-row-reverse, etc...