参考资料

1. 如何优化过渡动画的性能？
2. CSS 阴影效果设置
3. 颜色属性详细说明以及案例
4. 动态伪类选择器详细说明以及案例
5. css让div居中的几种方法
6. css div居中对齐方式
7. 伪元素选择器详细说明以及案例
8. 后代选择器详细说明以及案例

flex-direction: row/column

flex-direction: row

• 默认值：子元素水平排列，从左到右。

• 示例：

  .container {
    display: flex;
    flex-direction: row;
  }

  <div class="container">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </div>

  效果：Item 1、Item 2、Item 3 从左到右水平排列。

• 用法：

• 适用于需要水平布局的场景（如导航栏、按钮组）。

• 与 justify-content 和 align-items 配合控制对齐方式。

flex-direction: column

• 作用：子元素垂直排列，从上到下。

• 示例：

  .container {
    display: flex;
    flex-direction: column;
  }

  <div class="container">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </div>

  效果：Item 1、Item 2、Item 3 从上到下垂直排列。

• 用法：

• 适用于需要垂直布局的场景（如表单、卡片列表）。

• 通常与 align-items 控制水平对齐。