2.4 Flexbox 弹性布局

Flexbox（Flexible Box）是一种用于一维布局的 CSS 布局模型，它使得容器内的项目能够更加灵活地排列和对齐，不受传统布局方式（如块级元素、浮动、定位等）的限制。Flexbox 非常适合用于实现响应式布局，解决了许多传统布局方法中的一些问题（如对齐和分配空间等）。

Flexbox 的核心概念是容器和项目，容器中的项目可以在不同方向上进行排列、对齐和分配空间。接下来我们将详细介绍 Flexbox 的各个部分。

1. Flexbox 的基本结构

Flexbox 布局通常包括两个部分：

容器（Flex Container）：使用 display: flex; 或 display: inline-flex; 创建一个弹性布局容器。
项目（Flex Items）：容器内的所有直接子元素，默认情况下，所有子元素都会被视为弹性项目。

.container {
  display: flex; /* 创建一个弹性容器 */
}
.item {
  /* 每个子元素都是弹性项目 */
}

2. 主轴和交叉轴

在 Flexbox 中，布局是基于两条轴进行的：

主轴（Main Axis）：主轴是项目排列的主要方向。默认情况下，主轴是水平方向，从左到右。可以通过 flex-direction 属性来控制。
交叉轴（Cross Axis）：交叉轴与主轴垂直，默认情况下是垂直方向，从上到下。交叉轴的对齐可以通过 align-items 和 align-self 属性控制。

.container {
  display: flex;
  flex-direction: row; /* 水平方向为主轴 */
}

3. 主要属性

3.1 `display: flex` 和 `display: inline-flex`

display: flex：将容器定义为弹性容器，容器内的项目成为弹性项目。
display: inline-flex：将容器定义为内联弹性容器，容器本身表现为内联元素，但其中的项目仍然是弹性项目。

.container {
  display: flex; /* 弹性容器 */
}
.container-inline {
  display: inline-flex; /* 内联弹性容器 */
}

3.2 `flex-direction`

flex-direction 用于设置主轴的方向，决定项目的排列方式。可以设置以下几种值：

row：默认值，项目沿水平方向排列（从左到右）。
row-reverse：项目沿水平方向排列，但顺序是从右到左。
column：项目沿垂直方向排列（从上到下）。
column-reverse：项目沿垂直方向排列，但顺序是从下到上。

.container {
  display: flex;
  flex-direction: row; /* 主轴为水平方向 */
}

.container-column {
  display: flex;
  flex-direction: column; /* 主轴为垂直方向 */
}

3.3 `justify-content`

justify-content 用于设置沿主轴（横轴）方向的对齐方式，它决定了项目如何在主轴上分布。常见的值有：

flex-start：默认值，项目沿主轴的起始位置对齐。
flex-end：项目沿主轴的结束位置对齐。
center：项目在主轴上居中对齐。
space-between：项目在主轴上均匀分布，第一个项目靠左，最后一个项目靠右，其他项目均匀间隔。
space-around：项目在主轴上均匀分布，每个项目两侧的间隔相等。
space-evenly：项目在主轴上均匀分布，每个项目之间的间隔相等。

.container {
  display: flex;
  justify-content: center; /* 主轴居中 */
}

3.4 `align-items`

align-items 用于设置项目在交叉轴（竖直方向）上的对齐方式。常见的值有：

flex-start：项目在交叉轴的起始位置对齐。
flex-end：项目在交叉轴的结束位置对齐。
center：项目在交叉轴上居中对齐。
baseline：项目沿基线对齐。
stretch：项目在交叉轴上拉伸以填满容器（默认值）。

.container {
  display: flex;
  align-items: center; /* 交叉轴居中 */
}

3.5 `align-self`

align-self 用于控制单个项目在交叉轴上的对齐方式，覆盖 align-items 的设置。常见的值有：

auto：使用 align-items 的值（默认值）。
flex-start：项目在交叉轴的起始位置对齐。
flex-end：项目在交叉轴的结束位置对齐。
center：项目在交叉轴上居中对齐。
baseline：项目沿基线对齐。
stretch：项目在交叉轴上拉伸。

.item {
  align-self: flex-end; /* 单个项目靠交叉轴的结束对齐 */
}

3.6 `flex-wrap`

flex-wrap 用于控制弹性容器内的项目是否换行。默认情况下，所有项目会在一行内排列，但如果容器的宽度不足以容纳所有项目，可以通过 flex-wrap 来允许换行。

nowrap：默认值，所有项目都放在一行内。
wrap：项目会换行排列。
wrap-reverse：项目会换行排列，但顺序是从下到上。

.container {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
}

4. 弹性项目的其他属性

4.1 `flex-grow`

flex-grow 属性定义了项目相对于其他项目的放大比例。当容器有剩余空间时，flex-grow 指定了项目应该扩展多少空间。默认值是 0，表示不放大。

.item {
  flex-grow: 1; /* 使项目按比例扩展 */
}

4.2 `flex-shrink`

flex-shrink 属性定义了项目相对于其他项目的缩小比例。当容器空间不足时，flex-shrink 控制项目应该缩小多少空间。默认值是 1，表示元素会缩小。

.item {
  flex-shrink: 1; /* 项目可以缩小 */
}

4.3 `flex-basis`

flex-basis 定义了项目在主轴上的初始大小。它确定了项目分配空间之前的基础大小。如果为 auto，则根据项目的实际内容大小决定。

.item {
  flex-basis: 200px; /* 初始大小为 200px */
}

4.4 `flex`

flex 是一个简写属性，用于设置 flex-grow、flex-shrink 和 flex-basis 的值。常见的格式是：

.item {
  flex: 1; /* 等同于 flex-grow: 1; flex-shrink: 1; flex-basis: 0; */
}

5. Flexbox 实例

下面是一个常见的 Flexbox 布局示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox 布局示例</title>
  <style>
    .container {
      display: flex;
      justify-content: space-between; /* 项目间均匀分布 */
      align-items: center; /* 项目在交叉轴上居中 */
      height: 100vh;
    }
    .item {
      background-color: lightblue;
      padding: 20px;
      width: 100px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">项目 1</div>
    <div class="item">项目 2</div>
    <div class="item">项目 3</div>
  </div>
</body>
</html>

在这个例子中：

display: flex 创建了一个弹性容器。
justify-content: space-between 确保项目在主轴上均匀分布。
`

#前端开发分享于 2025-03-09

上一篇：2.3 定位（静态、相对、绝对、固定、粘性）下一篇：2.5 CSS Grid 网格布局

2.4 Flexbox 弹性布局