第8章 弹性布局基础
CSS3引入了一个强大的布局模块——弹性布局（Flexbox），它提供了一种更加高效、直观的方式来排列和对齐元素，使复杂布局的实现变得更加简单。本章将详细介绍弹性布局的基本概念和属性，并通过具体示例帮助读者掌握如何使用弹性布局。
8.1 弹性布局简介
弹性布局（Flexbox）是一种一维布局模型，主要用于在一个方向上（水平或垂直）排列子元素。它能够让我们更轻松地创建各种复杂的布局，包括居中对齐、等宽列和灵活的项目排列。
特点
- 简化对齐和分布：无论容器内的元素有多少，弹性布局都能让它们均匀分布或对齐。
- 响应式设计：弹性布局能够根据容器的尺寸自动调整子元素的尺寸和排列方式，适合创建响应式设计。
- 灵活的项目尺寸：子元素可以按比例缩放或扩展，以填满容器的剩余空间。
8.2 弹性容器与弹性项目
弹性布局的核心概念是弹性容器（flex container）和弹性项目（flex item）。
- 弹性容器：设置了
display: flex;或display: inline-flex;的元素。 - 弹性项目：弹性容器内的直接子元素。
示例
<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; /* 将容器设为弹性容器 */
}
.flex-item {
padding: 10px;
background-color: #f0f0f0;
margin: 5px;
border: 1px solid #ccc;
}
8.3 弹性布局的基本属性
弹性容器的属性
-
flex-direction：定义主轴的方向（弹性项目的排列方向）。-
取值：
row（默认值），row-reverse，column，column-reverse -
示例：
.flex-container { flex-direction: row; /* 水平排列，默认值 */ }
-
-
flex-wrap：定义弹性项目是否换行。-
取值：
nowrap（默认值），wrap，wrap-reverse -
示例：
.flex-container { flex-wrap: wrap; /* 允许弹性项目换行 */ }
-
-
justify-content：定义主轴上的对齐方式。-
取值：
flex-start（默认值），flex-end，center，space-between，space-around，space-evenly -
示例：
.flex-container { justify-content: space-between; /* 项目在主轴上均匀分布 */ }
-
-
align-items：定义交叉轴上的对齐方式。-
取值：
stretch（默认值），flex-start，flex-end，center，baseline -
示例：
.flex-container { align-items: center; /* 项目在交叉轴上居中对齐 */ }
-
-
align-content：定义多根轴线的对齐方式。如果只有一根轴线，该属性不起作用。-
取值：
stretch（默认值），flex-start，flex-end，center，space-between，space-around -
示例：
.flex-container { align-content: space-around; /* 多根轴线均匀分布 */ }
-
弹性项目的属性
-
order：定义项目的排列顺序，数值越小，排列越靠前。-
示例：
.flex-item { order: 1; /* 默认值为0 */ }
-
-
flex-grow：定义项目的放大比例。-
示例：
.flex-item { flex-grow: 1; /* 项目将填满剩余空间 */ }
-
-
flex-shrink：定义项目的缩小比例。-
示例：
.flex-item { flex-shrink: 1; /* 项目可以缩小以适应容器 */ }
-
-
flex-basis：定义在分配多余空间之前，项目的默认大小。-
示例：
.flex-item { flex-basis: 100px; /* 项目的初始大小 */ }
-
-
align-self：允许单个项目在交叉轴上对齐方式与其他项目不同。-
取值：
auto（默认值），flex-start，flex-end，center，baseline，stretch -
示例：
.flex-item { align-self: flex-end; /* 项目在交叉轴上对齐到底部 */ }
-
8.4 简单弹性布局示例
以下示例展示了如何使用弹性布局属性创建一个简单的响应式布局。
示例1：水平排列项目
<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; /* 将容器设为弹性容器 */
flex-direction: row; /* 项目水平排列 */
justify-content: space-around; /* 项目在主轴上均匀分布 */
align-items: center; /* 项目在交叉轴上居中对齐 */
height: 200px; /* 容器高度 */
border: 1px solid #ccc; /* 容器边框 */
}
.flex-item {
padding: 20px;
background-color: #f0f0f0;
border: 1px solid #ccc;
margin: 5px;
flex-grow: 1; /* 项目将填满剩余空间 */
}
示例2：垂直排列项目
<div class="flex-container-vertical">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
.flex-container-vertical {
display: flex; /* 将容器设为弹性容器 */
flex-direction: column; /* 项目垂直排列 */
justify-content: center; /* 项目在主轴上居中对齐 */
align-items: flex-start; /* 项目在交叉轴上靠左对齐 */
height: 300px; /* 容器高度 */
border: 1px solid #ccc; /* 容器边框 */
}
.flex-item {
padding: 20px;
background-color: #f0f0f0;
border: 1px solid #ccc;
margin: 5px;
flex-grow: 1; /* 项目将填满剩余空间 */
}