Flexbox 是 CSS3 中的一个布局模型，它能够让我们更轻松地设计网页布局。Flexbox 允许容器中的项目能够灵活地伸缩，从而更好地适应不同的屏幕尺寸和设备。

Flexbox 基础

  1. 容器 (Container)

    • 使用 display: flex; 或 display: grid; 将一个元素定义为容器。
    • 容器内的元素成为其子项 (items)。

  2. 主轴 (Main Axis) 和交叉轴 (Cross Axis)

    • 主轴是容器的主方向，交叉轴是垂直于主轴的方向。
    • 默认情况下，主轴是水平方向，交叉轴是垂直方向。

  3. 项目 (Items)

    • 容器内的子项默认会沿着主轴排列。
    • 项目可以使用 order 属性来改变其顺序。

  4. 对齐方式 (Alignment)

    • 使用 align-items 和 justify-content 属性来控制项目在容器内的对齐方式。

实例

假设我们有一个容器，包含三个子项：

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

CSS:

.flex-container {
  display: flex;
  justify-content: space-around; /* 子项在主轴方向上平均分布 */
  align-items: center; /* 子项在交叉轴方向上居中对齐 */
}

.flex-item {
  margin: 10px;
  padding: 20px;
  background-color: lightblue;
}

Flexbox 实例

更多关于 Flexbox 的内容，您可以访问Flexbox 教程。

Flexbox 是一个非常强大的布局工具，它能够帮助开发者创建更加灵活和响应式的网页布局。如果您对 Flexbox 有更多疑问，欢迎在评论区留言交流。