参考资料

1. css div居中对齐方式
2. display: flex/inline-flex示例
3. css阴影效果代码
4. 类选择器详细说明以及案例
5. CSS定位详细说明以及案例
6. 目标伪类选择器详细说明以及案例
7. align-self: auto/stretch详细说明
8. flex-direction: row/column

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 控制水平对齐。