前端布局系列---flex布局

布局是指HTML的整体结构，好的布局直接影响到用户的体验，同样，在前端面试的过程中，布局也是一个必问点，所以，今天我们来整体回顾一下flex布局。

---

什么是flex布局？

flex是flexibleBox的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性，主要用来为移动端布局，PC端支持较差。

布局原理

通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

开始flex布局的方式

/* 块级元素 */
display:flex
/* 行内元素 */
display:inline-flex

任何一个元素都可以指定为flex布局。当我们为父盒子设为flex布局之后，子元素的float、clear、vertical-align属性将失效。

采用flex布局的元素，称为flex容器（flex container），所有的子元素自动成为容器成员，称为flex项目（flex item），默认存在两根轴，水平的主轴（main axis）和垂直的交叉轴（cross axis），项目默认沿主轴排列。如下图所示：

flex容器的属性

属性	含义
flex-direction	设置主轴的方向
justify-content	设置主轴上的子元素排列方式
flex-wrap	设置子元素是否换行
align-items	设置侧轴上的子元素的排列方式
flex-flow	flex-direction和flex-wrap的复合属性
align-content	决定了多行子元素在侧轴的对齐方式

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; 所有的距离都相等

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; 所有距离都相等

6.flex-flow：flex-direction和flex-wrap的复合属性

flex项目的属性

属性	含义
order	定义项目的排列顺序，默认是0，越小越靠前
flex-grow	设置子元素如何扩展，默认为0，即使存在剩余空间，也不放大
flex-shrink	设置子元素如何收缩，默认为0，即空间不足时，会缩小
flex-basis	设置子元素在主轴上的字体大小
align-self	控制子元素自己在侧轴上的排列方式，覆盖父元素的align-items属性
flex	定义子元素分配剩余空间

1.order：定义项目的排列顺序，默认是0，越小越靠前

给child1元素添加属性order: 1;，展示效果如图：

2.flex-grow：设置子元素如何扩展，默认为0，即使存在剩余空间，也不放大

给child1元素添加属性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。

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 * 收缩比例。最终会溢出父盒子。

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;，展示效果如图：

6.flex：定义子元素分配剩余空间

是flex-grow、flex-shrink、flex-basis的简写

小结

到此，flex布局的相关知识整理就先到这里了，flex布局让我们的布局方式更加灵活和简单，还可以达到页面布局自适应的效果。