flex-direction: row;是什么意思？

`flex-direction: row;` 是一个用于 Flexbox 布局的 CSS 属性，用于指定弹性容器中弹性项目的排列方向。

具体来说，`flex-direction` 属性有以下几个可能的取值：

- `row`：默认值。弹性项目水平排列，从左到右。
- `row-reverse`：弹性项目水平排列，从右到左。
- `column`：弹性项目垂直排列，从上到下。
- `column-reverse`：弹性项目垂直排列，从下到上。

下面是一个示例，展示了不同 `flex-direction` 取值的效果：

<style>
  .container {
    display: flex;
    height: 200px;
    width: 400px;
    border: 1px solid black;
  }
  .item {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    margin: 10px;
  }
</style>

<h3>flex-direction: row</h3>
<div class="container" style="flex-direction: row;">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<h3>flex-direction: row-reverse</h3>
<div class="container" style="flex-direction: row-reverse;">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<h3>flex-direction: column</h3>
<div class="container" style="flex-direction: column;">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<h3>flex-direction: column-reverse</h3>
<div class="container" style="flex-direction: column-reverse;">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

在上述示例中，`.container` 是一个具有固定宽度和高度的弹性容器，包含了三个 `.item` 弹性项目。通过设置不同的 `flex-direction` 取值，可以观察到弹性项目在不同方向上的排列效果。