什么是 Flexbox 布局？
Flexbox（弹性盒子布局）是一种基于 CSS3 的布局模型，可以帮助我们更方便地进行页面布局，特别是在移动端和响应式布局方面。它的优点很多，比如可以垂直居中、自适应、自动调整元素位置和大小等，对于前端开发者来说是一个非常有用的工具。
Flexbox 的主要概念
在学习 Flexbox 布局之前，需要了解一些基本的概念：
容器（container）
容器是应用 Flexbox 布局的父元素，即包含所有子元素的元素。容器中的子元素可被称为“项目（item）”。
主轴（main axis）
主轴是 Flexbox 容器的方向，可以是水平或垂直方向。
交叉轴（cross axis）
交叉轴是与主轴垂直的轴。
方向（flex direction）
方向决定主轴的方向，默认值是从左到右，但也可以从右到左、从上到下、从下到上等。
对齐方式（justify content）
对齐方式决定项目在主轴上的对齐方式，比如居中、靠近左边、靠近右边等。
伸展（flex）
伸展决定项目的能否伸展以及可伸展的程度。每一个项目都可以设置一个 flex 属性，来控制项目所占的比例。
对齐方式（align items）
对齐方式决定项目在交叉轴上的对齐方式，比如居中、底部对齐、顶部对齐等。
Flexbox 的基本用法
将容器变为一个 Flexbox 容器：
.container{
display: flex;
}设置 Flexbox 容器的主轴方向：
.container{
flex-direction: row; //主轴为水平方向
flex-direction: column; //主轴为垂直方向
}设置 Flexbox 容器的对齐方式：
.container{
justify-content: center; //主轴居中对齐
justify-content: flex-start; //主轴靠左对齐
justify-content: flex-end; //主轴靠右对齐
justify-content: space-between;//两端对齐
justify-content: space-around; //间隔对齐
}设置子元素的伸展属性：
.item{
flex: 1; //自动伸展
flex: 2; //占比为 2：1
flex: 3; //占比为 3：1
}设置子元素的对齐方式：
.item{
align-items: center; //交叉轴居中对齐
align-items: flex-start; //交叉轴靠上对齐
align-items: flex-end; //交叉轴靠下对齐
align-items: baseline; //基线对齐
align-items: stretch; //填满交叉轴
}Flexbox 的实际应用
在实际开发中，Flexbox 布局的应用非常广泛，比如创建基于列的布局（左右列等宽或固定宽度），创建响应式网格布局（自适应或固定宽度的列数），实现轮播、导航、进度条等等。下面简单介绍一些典型的案例。
列布局
- 左右两列等宽布局
-- -------------------- ---- ------- ---- ------------------ ---- ----------------------- ---- ------------------------ ------ ----------- -------- ----- - ------------- ----- -- -
- 固定宽度的左右两列布局：
-- -------------------- ---- ------- ---- ------------------ ---- ----------------------- ---- ------------------------ ------ ----------- -------- ----- - ------------- ------ ------ -
网格布局
- 3 列自适应布局：
-- -------------------- ---- ------- ---- ------------------ ---- ---------------------- ---- ---------------------- ---- ---------------------- ---- ---------------------- ---- ---------------------- ---- ---------------------- ------ ----------- -------- ----- ---------- ----- ------ ---------------- -------------- - ------ ----------- ----------- - ------ -------------- ----- -
- 4 列固定宽度布局：
-- -------------------- ---- ------- ---- ------------------ ---- ---------------------- ---- ---------------------- ---- ---------------------- ---- ---------------------- ---- ---------------------- ---- ---------------------- ------ ----------- -------- ----- ---------- ----- ---------------- -------------- - ------ ------ -------- - ------ -------------- ----- -
其他应用
- 轮播图：
-- -------------------- ---- -------
---- ------------------
----
-------------
-------------
-------------
-------------
-----
------
-----------
-------- -----
---------------- -------
------------ -------
-
---
------ -----
------- -----
-------- -----
--------- -------
-
---
----- --
------- -----
-- 导航条：
-- -------------------- ---- -------
---- ---------------
----
-----------
-------------
-------------
-------------
-----
------
--------
-------- -----
---------------- -------
-
---
-------- -----
---------------- -------------
----------- -----
-
---
-------- -----
-总结
Flexbox 布局是一个非常有用的前端工具，可以帮助我们更轻松地进行页面布局，而且具有很好的可维护性和可扩展性，可以应用于很多不同的场景。学习 Flexbox 布局有助于提高我们的前端开发水平，虽然会涉及到一些新的概念和语法，但是只要掌握了基本的用法，就可以灵活运用到实践中去。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64741c82968c7c53b018b507