Flexbox 布局可以说是现代前端开发中最常用的布局方式之一，它提供了一种非常便捷的方式来对于元素进行定位、分布及对齐等操作。但是，很多开发者对于 Flexbox 布局还是比较陌生的，或者只是停留在表面了解的程度上。本篇文章旨在为您深度讲解 Flexbox 布局的常见用法，让你从表面了解进入到深度学习的阶段，并通过实际案例帮助你更好的掌握。
什么是 Flexbox 布局
Flexbox 布局是一种新的 CSS 布局方式，它提供了一种更加灵活的方式来实现容器中的元素的布局以及对齐等操作。Flexbox 布局中的每个元素都被称为弹性盒子（flexbox），它们可以被轻松的控制其尺寸、对齐以及顺序等属性。
主轴和交叉轴
在使用 Flexbox 布局中，我们需要了解两个重要的概念，即主轴（main axis）和交叉轴（cross axis）。主轴和交叉轴的方向是由 Flexbox 容器的主轴方向和交叉轴方向决定的。在默认情况下，Flexbox 容器的主轴方向是从左到右，交叉轴方向是从上到下。在 Flexbox 布局中，主轴用来控制项目的排列方向，交叉轴用来控制项目的对齐方式。
Flexbox 属性详解
容器相关属性
display
该属性用来定义 Flexbox 容器（即父级元素）的类型，取值可以为 flex 和 inline-flex。默认值为 flex，表示容器为块级容器。
.container {
display: flex;
}flex-direction
该属性用来设置 Flexbox 容器中弹性盒子沿主轴方向的排列顺序。
取值有以下 4 种：
- row：默认值，表示弹性盒子沿着水平方向排列，起点在左侧。
- row-reverse：表示弹性盒子沿着水平方向反向排列，起点在右侧。
- column：表示弹性盒子沿着垂直方向排列，起点在上侧。
- column-reverse：表示弹性盒子沿着垂直方向反向排列，起点在下侧。
.container {
display: flex;
flex-direction: column;
}flex-wrap
该属性用来设置弹性盒子是否可以换行。
取值有以下 3 种：
- nowrap：默认值，表示不换行。
- wrap：表示弹性盒子可以换行。
- wrap-reverse：表示弹性盒子可以换行，但是反向排列。
.container {
display: flex;
flex-wrap: wrap;
}flex-flow
该属性是 flex-direction 和 flex-wrap 两个属性的缩写，用来定义 Flexbox 容器中弹性盒子的排列方向以及是否可以换行。
.container {
display: flex;
flex-flow: row wrap;
}justify-content
该属性用来设置弹性盒子在主轴方向上的对齐方式。
取值有以下 6 种：
- flex-start：默认值，表示弹性盒子靠主轴起点对齐。
- flex-end：表示弹性盒子靠主轴终点对齐。
- center：表示弹性盒子在主轴方向上居中对齐。
- space-between：表示弹性盒子沿主轴方向平均分布，首尾两个弹性盒子分别靠起点和终点对齐。
- space-around：表示弹性盒子沿主轴方向平均分布，各个弹性盒子之间的间距相等。
- space-evenly：表示弹性盒子沿主轴方向平均分布，各个弹性盒子之间的间距也相等。
.container {
display: flex;
justify-content: center;
}align-items
该属性用来设置弹性盒子在交叉轴方向上的对齐方式。
取值有以下 5 种：
- stretch：默认值，表示弹性盒子沿交叉轴方向拉伸以适应容器高度。
- flex-start：表示弹性盒子靠交叉轴起点对齐。
- flex-end：表示弹性盒子靠交叉轴终点对齐。
- center：表示弹性盒子在交叉轴方向上居中对齐。
- baseline：表示弹性盒子沿着基线对齐。
.container {
display: flex;
align-items: center;
}align-content
该属性用来设置弹性盒子在交叉轴方向上的排列方式，只有当容器中有多行弹性盒子时才会生效。
取值有以下 6 种：
- stretch：默认值，表示弹性盒子沿交叉轴方向拉伸以适应容器高度。
- flex-start：表示所有弹性盒子在交叉轴起点处排列。
- flex-end：表示所有弹性盒子在交叉轴终点处排列。
- center：表示所有弹性盒子在交叉轴方向居中排列。
- space-between：表示弹性盒子沿交叉轴方向平均分布，首尾两个弹性盒子分别靠起点和终点对齐。
- space-around：表示弹性盒子沿交叉轴方向平均分布，各个弹性盒子之间的间距相等。
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
}子元素相关属性
order
该属性用来设置弹性盒子的排列顺序，取值为整数类型，数值越小的弹性盒子排列越靠前，默认值为 0。
.container div:nth-child(2) {
order: 1;
}flex-grow
该属性用来设置弹性盒子在主轴方向上的伸展比率，当容器中的空间有剩余时，弹性盒子会按照 flex-grow 的比例进行分配，默认值为 0。
.container div:nth-child(2) {
flex-grow: 1;
}flex-shrink
该属性用来设置弹性盒子在主轴方向上的收缩比率，当弹性盒子超出容器的空间时，弹性盒子会按照 flex-shrink 的比例进行收缩，默认值为 1。
.container div:nth-child(2) {
flex-shrink: 1;
}flex-basis
该属性用来设置弹性盒子在主轴方向上的初始尺寸，默认值为 auto。
.container div:nth-child(2) {
flex-basis: 50%;
}flex
该属性是 flex-grow、flex-shrink 和 flex-basis 三个属性的缩写，用来快捷设置弹性盒子的伸展比率、收缩比率和初始尺寸。
.container div:nth-child(2) {
flex: 1 1 50%;
}align-self
该属性用来设置单个弹性盒子在交叉轴方向上的对齐方式。
取值有以下 5 种，与 align-items 的取值相同：
- auto：默认值，表示使用父元素的 align-items 属性。
- stretch：表示弹性盒子沿交叉轴方向拉伸以适应容器高度。
- flex-start：表示弹性盒子靠交叉轴起点对齐。
- flex-end：表示弹性盒子靠交叉轴终点对齐。
- center：表示弹性盒子在交叉轴方向上居中对齐。
- baseline：表示弹性盒子沿着基线对齐。
.container div:nth-child(2) {
align-self: flex-end;
}主流布局应用实例
水平垂直居中
<div class="container"> <div class="box">1</div> <div class="box">2</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------- ------------ ------- - ---- - ------ ----- ------- ----- ----------- ----- ------ ----- ----------- ------- ------------ ----- -
等高布局
<div class="container"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- - ---- - ----- -- ----------- ----- ------ ----- ----------- ------- ------------ ------ -
左右等宽
<div class="container"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- - ---- - ----- -- ----------- ----- ------ ----- ----------- ------- ------------ ------ - ----------------- - ------------- ----- - ----------------- - ------------- ----- -
总结
本篇文章对于常用的 Flexbox 布局属性进行了详细的介绍，并通过实际案例帮助读者更好的了解和掌握 Flexbox 布局的使用方法。不管是对于刚开始接触 Flexbox 布局的初学者，还是有一定经验的开发者，本文都能为你提供帮助并指引你进入到深度学习的阶段。当然，了解了 Flexbox 布局以后，你还可以更深入地学习 Grid 布局，这将为你更加全面的掌握现代前端布局奠定基础。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646aad4d968c7c53b0a30c4f