第六章：弹性布局（Flexbox）

1. Flexbox 的基本概念

弹性布局（Flexbox）是一种用于设计复杂布局的 CSS 模块。它特别适合用于需要灵活响应各种屏幕尺寸和方向的布局。Flexbox 通过使用容器和项目的概念，使得布局变得更加容易和直观。

Flex 容器与 Flex 项目

Flex 容器

一个 Flex 容器是包含 Flex 项目的父元素。通过将 display 属性设置为 flex 或 inline-flex，可以将一个元素变为 Flex 容器。

.container {
  display: flex;
}

Flex 项目

Flex 项目是 Flex 容器的直接子元素。这些项目将遵循 Flex 容器的布局规则进行排列。

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

Flex 容器属性

Flex 容器有多个属性可以控制其内部项目的排列和对齐方式。

主轴和交叉轴

• 主轴（Main Axis）：Flex 容器中的主要排列方向，默认为水平方向（从左到右）。
• 交叉轴（Cross Axis）：与主轴垂直的方向，默认为垂直方向（从上到下）。

flex-direction

flex-direction 属性定义了 Flex 容器中项目的排列方向。

• row（默认值）：主轴为水平方向，从左到右。
• row-reverse：主轴为水平方向，从右到左。
• column：主轴为垂直方向，从上到下。
• column-reverse：主轴为垂直方向，从下到上。

.container {
  display: flex;
  flex-direction: row; /* 可以是 row, row-reverse, column, column-reverse */
}

justify-content

justify-content 属性定义了项目在主轴上的对齐方式。

• flex-start（默认值）：项目从主轴的起点开始排列。
• flex-end：项目从主轴的终点开始排列。
• center：项目在主轴上居中排列。
• space-between：项目之间的间距相等，首尾项目紧贴容器边缘。
• space-around：项目之间的间距相等，每个项目两侧的间距为容器边缘的一半。

.container {
  display: flex;
  justify-content: center; /* 可以是 flex-start, flex-end, center, space-between, space-around */
}

align-items

align-items 属性定义了项目在交叉轴上的对齐方式。

• stretch（默认值）：项目在交叉轴上拉伸至与容器同高。
• flex-start：项目在交叉轴的起点对齐。
• flex-end：项目在交叉轴的终点对齐。
• center：项目在交叉轴上居中对齐。
• baseline：项目的基线对齐。

.container {
  display: flex;
  align-items: center; /* 可以是 stretch, flex-start, flex-end, center, baseline */
}

flex-wrap

flex-wrap 属性定义了项目是否在容器中换行。

• nowrap（默认值）：项目不换行。
• wrap：项目换行，第一行在上方。
• wrap-reverse：项目换行，第一行在下方。

.container {
  display: flex;
  flex-wrap: wrap; /* 可以是 nowrap, wrap, wrap-reverse */
}

Flex 项目属性

Flex 项目有多个属性可以控制其自身的排列和对齐方式。

order

order 属性定义了项目的排列顺序，默认值为 0。

.item {
  order: 2; /* 数字越小，项目越靠前 */
}

flex-grow

flex-grow 属性定义了项目的增长比例，默认值为 0。

.item {
  flex-grow: 1; /* 项目可以增长以填充剩余空间 */
}

flex-shrink

flex-shrink 属性定义了项目的收缩比例，默认值为 1。

.item {
  flex-shrink: 0; /* 项目不会收缩 */
}

flex-basis

flex-basis 属性定义了项目的初始大小，可以是具体数值或 auto。

.item {
  flex-basis: 100px; /* 项目的初始大小为 100px */
}

align-self

align-self 属性允许单个项目有与其他项目不同的对齐方式。

.item {
  align-self: center; /* 可以是 auto, flex-start, flex-end, center, baseline, stretch */
}

2. 弹性布局的应用

水平居中与垂直居中

使用 Flexbox 实现水平居中和垂直居中非常简单，只需设置 justify-content 和 align-items 属性。

<div class="container">
  <div class="item">Centered Item</div>
</div>

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 让容器占满整个视窗高度，便于演示居中效果 */
}

多列布局与均分布局

Flexbox 可以轻松实现多列布局，并均分列宽。

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

.container {
  display: flex;
}

.item {
  flex: 1; /* 每个项目占据相同的宽度 */
  padding: 10px;
  border: 1px solid #000;
}

响应式布局的实现

Flexbox 还可以用于实现响应式布局，根据屏幕宽度自动调整项目的排列方式。

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

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 1 200px; /* 项目最小宽度为 200px */
  padding: 10px;
  margin: 5px;
  border: 1px solid #000;
}

在这个例子中，每个项目的宽度至少为 200px，如果容器有足够的空间，项目会自动换行，以适应窗口大小。

通过学习和理解这些 Flexbox 的基本概念和属性，你将在网页布局中获得极大的灵活性和控制力。