flex-direction: row/column

参考资料

1. 几种常用的 CSS 横向布局方法
2. 子选择器详细说明以及案例
3. CSS阴影颜色
4. 后代选择器详细说明以及案例
5. 如何用Flex布局制作响应式布局？
6. 属性选择器详细说明以及案例
7. CSS浮动详细说明以及案例
8. display: flex/inline-flex示例

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

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。