Flexbox 是 CSS3 中一种用于布局的强大工具，它使得网页元素的排列变得更加灵活和高效。下面将为您介绍 Flexbox 的基本概念和使用方法。

Flexbox 基本概念

Flexbox 模型定义了一个容器（称为 flex container）和它的子元素（称为 flex items）。通过使用 Flexbox，可以轻松地实现以下布局效果：

  • 水平或垂直方向上的对齐
  • 子元素之间的间隔
  • 子元素的大小调整

1. 容器属性

  • display: flex;：将容器设置为伸缩容器
  • flex-direction: row | column;：设置主轴方向，默认为水平方向
  • 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;：设置交叉轴上的多行子元素对齐方式

2. 子元素属性

  • order: <integer>;：设置子元素的顺序，数值越小，越靠前
  • flex-grow: <number>;：设置子元素的放大比例
  • flex-shrink: <number>;：设置子元素的缩小比例
  • flex-basis: <length>;：设置子元素的基准大小

实战案例

以下是一个使用 Flexbox 的简单示例：

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

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

.flex-item {
  flex-grow: 1;
  margin: 10px;
}

在这个例子中，.flex-container 是伸缩容器，.flex-item 是伸缩项。通过设置 justify-content 和 align-items 属性，我们可以实现子元素在水平和垂直方向上的对齐。

扩展阅读

想了解更多关于 Flexbox 的知识？请访问我们的 Flexbox 教程。

Flexbox示意图