参考资料

  1. css布局格式
  2. css阴影效果代码
  3. 如何调试Flex布局问题?
  4. 几种常用的 CSS 横向布局方法
  5. CSS有哪些预处理器?
  6. css怎么使div居中
  7. id选择器详细说明以及案例
  8. css中div居中详细说明

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