在网页开发中，CSS Flexbox（弹性布局）是一种强大且灵活的布局方式，能够轻松地实现各种复杂的页面布局。本文将带您从零基础开始，全面了解 CSS Flexbox 的基本概念和常用属性，通过丰富的示例代码，帮助您快速掌握这项实用的布局技术。
一、认识 CSS Flexbox 布局
CSS Flexbox 是 CSS3 中新增的一种布局模式，旨在提供一种更加高效和灵活的方式来设计网页布局。它通过将容器设置为弹性容器，使子元素能够自动调整大小和排列顺序，从而实现各种复杂的布局效果。
在编程狮平台的教程中，您会发现 CSS Flexbox 布局相较于传统的布局方式，如浮动（float）和定位（positioning），具有以下显著优势：
- 高度的灵活性 ：能够轻松应对不同屏幕尺寸和设备，实现响应式设计。
- 自动分配空间 ：根据容器的可用空间，自动调整子元素的大小和间距。
- 简化布局代码 ：减少了大量繁琐的定位和浮动代码，使布局更加简洁直观。
二、Flexbox 布局的基本结构
一个完整的 Flexbox 布局由两个部分组成：弹性容器（Flex Container）和弹性项目（Flex Item）。
弹性容器（Flex Container）
弹性容器是包含弹性项目的父元素，它决定了弹性项目如何在其中排列和分布。要将一个元素设置为弹性容器，可以使用 display 属性，将其值设置为 flex。
.container {
display: flex;
}
在编程狮的示例中，.container 就是一个弹性容器，其内的所有直接子元素都会成为弹性项目。
弹性项目（Flex Item）
弹性项目是弹性容器的直接子元素，它们会在弹性容器中按照一定的规则进行排列和调整。
<div class="container">
<div class="item">项目 1</div>
<div class="item">项目 2</div>
<div class="item">项目 3</div>
</div>
在上述代码中，三个 <div class="item"> 元素都是弹性项目，它们会在弹性容器 .container 中按照 Flexbox 布局规则进行排列。
三、Flexbox 布局的容器属性
弹性容器提供了一系列属性，用于控制弹性项目的排列方式和空间分配。
flex-direction
flex-direction 属性用于设置弹性项目在主轴上的排列方向，可取值如下：
row：默认值，弹性项目从左到右排列（水平方向）。row-reverse：弹性项目从右到左排列（水平方向反转）。column：弹性项目从上到下排列（垂直方向）。column-reverse：弹性项目从下到上排列（垂直方向反转）。
示例代码：
.container {
display: flex;
flex-direction: row; /* 从左到右排列 */
}
在编程狮的练习环境中，您可以尝试修改 flex-direction 的值，观察弹性项目的排列变化。
flex-wrap
flex-wrap 属性用于控制弹性项目在换行时的行为，可取值如下：
nowrap：默认值，弹性项目不会换行，会在一个方向上延伸。wrap：弹性项目会在必要时换行，并在新行中继续排列。wrap-reverse：弹性项目会在必要时换行，并且换行后的方向与wrap相反。
示例代码：
.container {
display: flex;
flex-wrap: wrap; /* 允许弹性项目换行 */
}
当弹性项目的总宽度超过容器宽度时，使用 flex-wrap: wrap 可以使它们自动换行。
justify-content
justify-content 属性用于控制弹性项目在主轴上的对齐方式，可取值如下：
flex-start：默认值，弹性项目从主轴起点开始对齐。flex-end：弹性项目从主轴终点开始对齐。center：弹性项目在主轴上居中对齐。space-between：弹性项目在主轴上均匀分布，两端对齐。space-around：弹性项目在主轴上均匀分布，每个项目两侧留有相等的空间。
示例代码：
.container {
display: flex;
justify-content: space-between; /* 弹性项目在主轴上两端对齐 */
}
在 W3Cschool 的实例展示中，您可以直观地看到不同 justify-content 值对弹性项目排列的影响。
align-items
align-items 属性用于控制弹性项目在交叉轴上的对齐方式，可取值如下：
stretch：默认值，弹性项目在交叉轴上拉伸以填满容器空间。flex-start：弹性项目从交叉轴起点开始对齐。flex-end：弹性项目从交叉轴终点开始对齐。center：弹性项目在交叉轴上居中对齐。baseline：弹性项目按照基线对齐。
示例代码：
.container {
display: flex;
align-items: center; /* 弹性项目在交叉轴上居中对齐 */
}
当弹性容器的高度大于弹性项目本身高度时，使用 align-items 可以调整它们在垂直方向上的对齐位置。
四、Flexbox 布局的项目属性
弹性项目也拥有一些属性，用于控制自身的排列和空间分配行为。
order
order 属性用于控制弹性项目的排列顺序，数值越小，排列越靠前。
.item {
order: 2; /* 设置弹性项目的排列顺序为 2 */
}
在编程狮的排序示例中，通过调整不同弹性项目的 order 值，您可以轻松改变它们的显示顺序。
flex-grow
flex-grow 属性用于控制弹性项目在主轴上可占据的剩余空间比例。如果所有弹性项目的 flex-grow 属性总和为 1，则每个弹性项目占据的剩余空间为其 flex-grow 值乘以剩余空间。
.item1 {
flex-grow: 1; /* 弹性项目 1 可占据 1 份剩余空间 */
}
.item2 {
flex-grow: 2; /* 弹性项目 2 可占据 2 份剩余空间 */
}
在 W3Cschool 的空间分配示例中，您可以清晰地看到当容器宽度变化时，弹性项目如何根据 flex-grow 值自动调整大小。
flex-shrink
flex-shrink 属性用于控制弹性项目在主轴上可收缩的比例。当容器空间不足时，弹性项目会按照 flex-shrink 值的比例进行收缩。
.item {
flex-shrink: 1; /* 弹性项目可收缩的比例为 1 */
}
一般情况下，我们较少单独使用 flex-shrink，而是与 flex-grow 一起通过 flex 属性进行综合设置。
flex-basis
flex-basis 属性用于设置弹性项目在主轴上的初始大小，类似于传统的 width 或 height 属性。
.item {
flex-basis: 100px; /* 弹性项目在主轴上的初始大小为 100px */
}
您可以将 flex-basis 与 flex-grow 和 flex-shrink 结合使用，通过 flex 属性来实现更复杂的布局控制。
五、Flexbox 布局的综合示例
以下是一个综合使用 Flexbox 布局属性的示例，展示如何实现一个常见的水平居中、垂直居中且具有自适应空间分配的布局效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Flexbox 布局示例 - 编程狮教程</title>
<style>
.container {
display: flex;
height: 300px; /* 设置容器高度 */
justify-content: center; /* 主轴居中 */
align-items: center; /* 交叉轴居中 */
border: 1px solid #ccc;
}
.item1 {
width: 100px;
height: 100px;
background-color: #f0f0f0;
flex-grow: 1; /* 弹性项目 1 可占据剩余空间 */
}
.item2 {
width: 100px;
height: 100px;
background-color: #e0e0e0;
margin: 0 20px; /* 添加左右边距 */
}
.item3 {
width: 100px;
height: 100px;
background-color: #d0d0d0;
flex-grow: 2; /* 弹性项目 3 可占据更多的剩余空间 */
}
</style>
</head>
<body>
<div class="container">
<div class="item1">弹性项目 1</div>
<div class="item2">弹性项目 2</div>
<div class="item3">弹性项目 3</div>
</div>
</body>
</html>
在这个示例中，弹性容器 .container 使用 justify-content: center 和 align-items: center 实现了弹性项目在水平和垂直方向上的居中对齐。同时，弹性项目通过 flex-grow 属性实现了自适应的空间分配，弹性项目 3 会比弹性项目 1 占据更多的剩余空间。
课程推荐
六、总结
通过本文的详细介绍和示例代码，相信大家已经对 CSS Flexbox 布局有了一个全面的认识和基本的掌握。在实际的网页开发中，灵活运用 Flexbox 布局的各种属性，可以轻松实现各种复杂多样的页面布局效果，提高开发效率和代码的可维护性。继续在编程狮平台深入学习，您将能够更加熟练地运用 Flexbox 布局，为您的网页设计增添更多创意和可能性。
