Flexbox 是 CSS3 中的一个布局模型，用于在容器中排列和分配空间给其子元素。它提供了比传统的布局方式更灵活的布局选项。

Flexbox 的基本概念

  • 容器 (Container): 包含一个或多个子元素的元素。
  • 项目 (Item): 容器中的子元素。

Flexbox 的属性

  • display: 将元素设置为 flex 容器。
  • flex-direction: 定义项目的排列方向。
  • flex-wrap: 定义如果一行显示不下，如何换行。
  • flex-flow: 是 flex-direction 和 flex-wrap 的简写。
  • justify-content: 定义项目在主轴上的对齐方式。
  • align-items: 定义项目在交叉轴上如何对齐。
  • align-content: 定义多根轴线的对齐方式。

实例

以下是一个简单的 Flexbox 实例：

<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;
}

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

扩展阅读

想要了解更多关于 Flexbox 的内容，请访问Flexbox 官方文档。

图片展示

下面是 Flexbox 的一个应用实例：

Flexbox_Example