本文摘自PHP中文网，作者烟雨青岚，侵删。
我们之前已经学过一些布局模型，比如说浮动，绝对定位等等，但是这些布局方式一是不够简洁，而是使用的范围确实是太窄了。
flex模型拥有比较多的属性，来设置多样的布局方式，接下来我们就详细介绍各种属性对布局的改变，最后再对属性做一个汇总
先看一下flex的基本模型，如下图所示：
container父容器里有三个子元素flex-item。当给父容器设置display:flex;直接子元素就有布局模型了，上图中还有主轴和纵轴分别是布局的一个方向，后面的属性会详细说到。
接下来就先从flex-container属性开始介绍
1.flex-container
1.1 flex-direction(主轴方向)
flex-direction:row; （布局为一行，从start开始排）
flex-direction:row-reverse; (布局为一行，从end开始排)
flex-direction:column; (布局为一列，从start开始排)
flex-direction:column-reverse; (布局为一列，从end开始排)
1.2 flex-wrap(一条轴线排不下如何换行)
flex-wrap：nowrap; (不换行，在一行显示，即使子元素的宽度或者高度大于父元素的宽度或者高度，也在一行显示)
flex-wrap:wrap; (内容超过后换行)
flex-wrap:wrap-reverse; (换行后有两条轴线，reverse就是把轴线排列的顺序倒置过来)
1.3 justify-content （主轴对齐方式）
justify-content:flex-start; (start侧对齐，左对齐)
justify-content:flex-end; (end侧对齐，右对齐)
justify-content:center （中心对齐）
justify-content:space-between；（左右两侧没有间距，中间间距相同）
justify-content:space-around； （左右两侧的间距为中间间距的一半）
1.4 align-items（交叉轴对齐方式）
align-items:stretch; (拉伸)
align-items:flex-start; （start侧开始，上对齐）
align-items:flex-end; （end侧开始，下对齐）
align-items:center; (中心对齐)
align-items:baseline; （基线对齐）
1.5 align-content （多根轴线对齐方式）
align-content :stretch; (拉伸)
align-content :flex-start; (start侧开始，上对齐)
align-content :flex-end; （end侧开始，下对齐）
相关阅读 >>
了解css中的关键字initial、inherit、unset、revert和all属性
更多相关阅读请进入《css》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
