flex-direction: row/column示例

参考资料

1. align-self: auto/stretch详细说明
2. 层次/关系选择器详细说明以及案例
3. 后代选择器详细说明以及案例
4. id选择器详细说明以及案例
5. align-items: flex-start/end详细说明
6. 动态伪类选择器详细说明以及案例
7. 如何避免 CSS 过渡动画卡顿？
8. flex-direction: row/column

flex-direction: row/column 示例

HTML:

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

CSS:

.container {
  display: flex;
  flex-direction: row; /* 或 column */
  gap: 10px;
}

.item {
  padding: 20px;
  background: lightblue;
}

用法

• flex-direction: row: 子元素水平排列（默认值）

• flex-direction: column: 子元素垂直排列

• 可配合 flex-wrap, justify-content, align-items 使用

安装

不需要安装，是CSS原生属性，直接在现代浏览器中使用。