CSS Flexbox 是前端开发中用于布局的一种新的技术，它为页面提供了更加灵活和响应式的布局方式。CSS Flexbox 的思想是基于容器和子元素的关系，通过设定容器的属性，实现子元素固定比例、自适应大小、自动对齐等布局效果。本教程将介绍 CSS Flexbox 的基本概念、属性和实现方法，以及一些实战示例。
1. 概念
在 CSS Flexbox 中，一个容器将包含若干个子元素，容器就是 Flexbox 的布局容器，而子元素就是容器中的 Flexbox 项目。Flexbox 权威规范中的定义，是指在一维空间（通常是在水平方向或垂直方向）中布置子项的能力。它是一个强大的工具，可以帮助您轻松地创建复杂的布局。
2. 属性
CSS Flexbox 主要有以下几个属性：
2.1 display
在一个元素上应用 Flexbox 时，首先需要通过设置 display 属性来声明该元素是一个 Flexbox 容器：
.container {
display: flex;
}当元素的 display 属性被设置为 flex 时，它成为弹性容器，并且它的所有直接子元素都成为了容器中的 flex 项目。
2.2 flex-direction
flex-direction 属性是用来控制主轴方向的。主轴是指 Flexbox 布局时的主要方向（即水平或垂直）。
flex-direction 属性有 4 个可能的值：
- row（默认值）：子元素会从左到右排列。
- row-reverse：子元素会从右到左排列。
- column：子元素会从上到下排列。
- column-reverse：子元素会从下到上排列。
.container {
display: flex;
flex-direction: row;
}2.3 justify-content
justify-content 属性用于控制沿着主轴方向的对齐方式。
justify-content 属性有 5 个可能的值：
- flex-start（默认值）：子元素向主轴起点对齐。
- flex-end：子元素向主轴终点对齐。
- center：子元素在主轴方向上居中对齐。
- space-between：子元素沿主轴方向均匀分布，首尾元素让边距为零，其他元素之间的边距相等。
- space-around：子元素沿主轴方向均匀分布，每个元素周围的空间相等。
.container {
display: flex;
justify-content: center;
}2.4 align-items
align-items 属性用于控制沿着交叉轴（与主轴垂直的方向）的对齐方式。
align-items 属性有 6 个可能的值：
- stretch（默认值）：子元素沿着交叉轴拉伸填充整个容器。
- flex-start：子元素向交叉轴起点对齐。
- flex-end：子元素向交叉轴终点对齐。
- center：子元素在交叉轴方向上居中对齐。
- baseline：子元素的基线对齐。
- first baseline：第一行文本的基线对齐。
.container {
display: flex;
align-items: center;
}2.5 flex-wrap
flex-wrap 属性用于控制项目如何排列，以及是否允许换行。
flex-wrap 属性有三个可能的值：
- nowrap（默认值）：容器里的所有项目都不换行。
- wrap：容器里的项目会按照一列列的方式进行换行（第一列的高度固定，之后的列会另起一行）。
- wrap-reverse：容器里的项目会按照一列列的方式进行换行，但是按照与 normally 方向相反的顺序，即从后往前排列。
.container {
display: flex;
flex-wrap: wrap;
}2.6 align-content
如果在主轴方向上有剩余空间（即 justify-content 生效），那么 align-content 属性将帮助您控制各行之间的间距。
align-content 属性有 6 个可能的值：
- stretch（默认值）：当所有项目未设置高度或者设置为 auto，容器将使用 stretch 路径对齐项目，并且拉伸来填充剩余空间。
- flex-start：各行将向交叉轴的起始位置对齐，第一行与容器的起始位置对齐，完全没有留白。
- flex-end：各行将向交叉轴的结束位置对齐。
- center：各行将向交叉轴的中间位置对齐。
- space-between：各行将平均分布。
- space-around：各行将平均分布且留出两端的留白相等。
.container {
display: flex;
align-content: space-around;
}2.7 order
order 属性用于控制项目的排列顺序，默认为 0。它可以为负数。
.item {
order: 2;
}2.8 flex-grow
flex-grow 属性是用来控制项目在空间不足时如何拉伸的。它定义了一个比例值，该值表示项目在使用容器中所有剩余空间之前想要占据多少剩余空间。
.item {
flex-grow: 2;
}2.9 flex-shrink
flex-shrink 属性是定义当空间不足时，项目如何缩小的属性。默认是 1。例如，如果所有项目都设置为 1，则它们将始终拥有相等的尺寸；如果一个项目的值为 0，那么这个项目将不缩小。
.item {
flex-shrink: 0;
}2.10 flex-basis
flex-basis 属性定义了项目在分配任何剩余空间之前，默认大小。可以理解为子元素的初始尺寸。当设置为 auto 时，它会根据元素的宽度和高度来设置大小。
.item {
flex-basis: 200px;
}3. 实战示例
下面是一些实战示例，来帮助您更好地理解 CSS Flexbox 的使用方法。
3.1 Flexbox 垂直居中
在水平方向上，设置 justify-content:center，使子元素在容器水平居中。在垂直方向上，设置 align-items:center，使子元素在容器垂直居中。
<div class="container"> <div class="item-1">ITEM - 1</div> <div class="item-2">ITEM - 2</div> <div class="item-3">ITEM - 3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------- ------------ ------- ----------------- ---------- ------- ------ - -------- -------- ------- - ------ ------ ------- ------ ----------------- ----- ------ ------ ----------- ------- ------------ ------ -
3.2 Flexbox 左右布局
在给父元素设置 display:flex 的时候，子元素默认方向为横向布局，可使用 justify-content 和 align-items 控制它们的对齐方式。
<div class="container"> <div class="item-1">ITEM - 1</div> <div class="item-2">ITEM - 2</div> <div class="item-3">ITEM - 3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- -------------- ------------ ------- ----------------- ---------- ------- ------ -------- --- ----- - -------- -------- ------- - ------ ------ ------- ------ ----------------- ----- ------ ------ ----------- ------- ------------ ------ -
3.3 Flexbox 布局自适应
可以使用 flex-grow 和 flex-basis，通过设置比例和初始大小，来实现自适应布局。
<div class="container"> <div class="item-1">ITEM - 1</div> <div class="item-2">ITEM - 2</div> <div class="item-3">ITEM - 3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- -------------- ------------ ------- ----------------- ---------- ------- ------ -------- --- ----- - ------- - ---------- -- ----------- ------ ------- ------ ----------------- ----- ------ ------ ----------- ------- ------------ ------ - ------- - ---------- -- ----------- ------ ------- ------ ----------------- ----- ------ ------ ----------- ------- ------------ ------ - ------- - ---------- -- ----------- ------ ------- ------ ----------------- ----- ------ ------ ----------- ------- ------------ ------ -
4. 总结
本文介绍了 CSS Flexbox 的基本概念、属性和实现方法。以及一些实战示例。弹性布局可以很好地适应各种设备，并为 Web 开发工作带来更多灵活性。在 Web 开发中，尝试使用和掌握 CSS Flexbox 将使您的设计更加灵活和适应性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6483e3f448841e989431c4c1