CSS Flexbox 教程

Flexbox 是 CSS3 中的一个布局模式，它为布局提供了更多的灵活性和控制能力。下面是一些关于 Flexbox 的基本概念和用法。

基本概念

• 容器 (Container): 使用 display: flex; 或 display: inline-flex; 声明的元素。
• 项目 (Item): 在容器内的元素。
• 主轴 (Main Axis): 容器的主轴方向，默认为水平方向。
• 交叉轴 (Cross Axis): 垂直于主轴的轴。

常用属性

• flex-direction: 定义项目的布局方向，如 row（默认）、row-reverse、column、column-reverse。
• flex-wrap: 定义如果一行显示不下，如何换行，如 nowrap（默认）、wrap、wrap-reverse。
• justify-content: 定义项目在主轴上的对齐方式，如 flex-start、flex-end、center、space-between、space-around。
• align-items: 定义项目在交叉轴上如何对齐，如 flex-start、flex-end、center、stretch。
• align-content: 定义多根轴线的对齐方式，如 flex-start、flex-end、center、space-between、space-around、stretch。

实例

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

.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.item {
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

扩展阅读

想要了解更多关于 Flexbox 的内容，可以访问我们的 CSS Flexbox 深入教程。

Flexbox 示例