布局是指HTML的整体结构，好的布局直接影响到用户的体验，同样，在前端面试的过程中，布局也是一个必问点，所以，今天我们来整体回顾一下flex布局。
flex_3">什么是flex布局？
flex是flexibleBox的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性，主要用来为移动端布局，PC端支持较差。
布局原理
通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。
flex_8">开始flex布局的方式
/* 块级元素 */
display:flex
/* 行内元素 */
display:inline-flex
任何一个元素都可以指定为flex布局。当我们为父盒子设为flex布局之后，子元素的float、clear、vertical-align属性将失效。
采用flex布局的元素，称为flex容器（flex container），所有的子元素自动成为容器成员，称为flex项目（flex item），默认存在两根轴，水平的主轴（main axis）和垂直的交叉轴（cross axis），项目默认沿主轴排列。如下图所示：
flex_20">flex容器的属性
| 属性 | 含义 |
|---|---|
| flex-direction | 设置主轴的方向 |
| justify-content | 设置主轴上的子元素排列方式 |
| flex-wrap | 设置子元素是否换行 |
| align-items | 设置侧轴上的子元素的排列方式 |
| flex-flow | flex-direction和flex-wrap的复合属性 |
| align-content | 决定了多行子元素在侧轴的对齐方式 |
flexdirection_30">1.flex-direction：设置主轴的方向
①flex-direction: row 默认，x轴，从左到右
②flex-direction: row-reverse; x轴翻转，从右到左
③flex-direction: column; y轴，从上到下
④flex-direction: column-reverse; y轴翻转，从下到上
2.justify-content：设置主轴上的子元素排列方式
①justify-content: flex-start;如果主轴是x轴，则从左到右
②justify-content: flex-end; 从尾部开始排列
③justify-content: center; 主轴上居中对齐
④justify-content: space-around; 到两端的距离等于中间距离的一半
⑤justify-content: space-between; 两端对齐，中间距离相等
⑥justify-content: space-evenly; 所有的距离都相等
flexwrap_55">3.flex-wrap：设置子元素是否换行
①flex-wrap: nowrap; 默认不换行，压缩显示
②flex-wrap: wrap; 换行显示
③flex-wrap: wrap-reverse; 多行显示，对比wrap，在侧轴上反过来
4.align-items：设置侧轴上的子元素的排列方式
①align-items: flex-start; 顶部对齐
②align-items: flex-end; 底部对齐
③align-items: center; 垂直居中
5.align-content：决定了多行子元素在侧轴的对齐方式
①align-content: flex-start; 从上到下
②align-content: flex-end;最后一行挨着下边
③align-content: center; 居中对齐
④align-content: space-around; 到两端的距离等于中间距离的一半
⑤align-content: space-between; 两端对齐，中间距离相等
⑥align-content: space-evenly; 所有距离都相等
flexflowflexdirectionflexwrap_83">6.flex-flow：flex-direction和flex-wrap的复合属性
flex_84">flex项目的属性
| 属性 | 含义 |
|---|---|
| order | 定义项目的排列顺序，默认是0，越小越靠前 |
| flex-grow | 设置子元素如何扩展，默认为0，即使存在剩余空间，也不放大 |
| flex-shrink | 设置子元素如何收缩，默认为0，即空间不足时，会缩小 |
| flex-basis | 设置子元素在主轴上的字体大小 |
| align-self | 控制子元素自己在侧轴上的排列方式，覆盖父元素的align-items属性 |
| flex | 定义子元素分配剩余空间 |
1.order：定义项目的排列顺序，默认是0，越小越靠前
给child1元素添加属性order: 1;，展示效果如图：
flexgrow0_98">2.flex-grow：设置子元素如何扩展，默认为0，即使存在剩余空间，也不放大
给child1元素添加属性flex-grow: 2;，展示效果如图：
flex-grow: 2;" />
flex-grow可以设置任意非负数字（正小数、正整数、0），默认是0。当flex container在主轴方向上有剩余size时，flex-grow才会有效。如果所有flex-item的flex-grow总和超过1，每个flex-item扩展的size为：剩余size * flex-grow / sum。不超过1，每个扩展的size为：剩余size * flex-grow。
flexshrink0_103">3.flex-shrink：设置子元素如何收缩，默认为0，即空间不足时，会缩小
给child1元素添加属性flex-shrink: 2;，展示效果如图：
flex-shrink可以设置任意非负数字（正小数、正整数、0），默认值是1。当flex-items的宽度超过了主轴的宽度时，flex-shrink才会有效。如果所有flex-item的flex-shrink总和超过1，每个flex-items收缩的size为：超出的size * 收缩比例 / 收缩比例之和。不超过1，每个flex-item的size为：超出size * 收缩比例。最终会溢出父盒子。
flexbasis_107">4.flex-basis：计算主轴是否有多余空间
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小，有优先级，从高到低如下：
max-width/max-height/min-width/min-height
flex-basis
width/height
内容本身的size
5.align-self：控制子元素自己在侧轴上的排列方式，覆盖父元素的align-items属性
父元素设置了align-items: center;，child1元素设置了align-self: flex-end;，展示效果如图：
flex_119">6.flex：定义子元素分配剩余空间
是flex-grow、flex-shrink、flex-basis的简写
小结
到此，flex布局的相关知识整理就先到这里了，flex布局让我们的布局方式更加灵活和简单，还可以达到页面布局自适应的效果。
