flex弹性布局

定义

flex是flexible Box的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性。

---

适用范围

任何一个容器都可以指定为flex布局。

---

关于flex

• 当我们为父盒子使用完flex布局以后，子元素的 float、clear和 vertical-align属性将失效。
• 我们平常所说的伸缩布局、弹性布局、伸缩盒布局说的都是flex布局

---

布局原理

采用flex布局的元素称为容器，它的所有子元素自动成为容器成员，称为项目，子容器可以横向排列也可以纵向排列。

总结原理：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

---

flex布局常见父项属性

以下6个属性是对父元素设置的

• flex-direction： 设置主轴的方向
• justify-content：设置主轴上的子元素排列方式
• align-items：设置侧轴上的子元素的排列方式（单行）
• align-content：设置侧轴上的子元素的排列方式（多行）
• flex-wrap： 设置子元素是否换行
• flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

1.flex-direction： 设置主轴的方向
flex-direction属性决定主轴的方向（即项目的排列方向）
当确定了一条为主轴，剩下的一条就为侧轴

属性值	说明
row	从左到右(默认值)
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

2.justify-content： 设置主轴上的子元素排列方式
justify-content属性定义了项目在主轴上的排列方式

属性值	说明
flex-start	从头部开始，如果主轴是x轴则从左到右，是y轴则从上到下(默认值)
flex-end	从尾部开始
center	在主轴居中对齐
space-arround	平分剩余空间
space-between	先两边贴边再平分剩余空间

3.align-items： 设置侧轴上的子元素的排列方式（单行）
align-items属性定义了侧轴上的子元素的排列方式，但侧轴上的元素应该只能有一行

属性值	说明
flex-start	从头部开始（默认值）
flex-end	从尾部开始
center	在侧轴居中对齐
stretch	拉伸

4.align-content： 设置侧轴上的子元素的排列方式（多行）
align-contentt属性定义了侧轴上的子元素的排列方式，但侧轴上的元素有多行

属性值	说明
flex-start	从头部开始(默认值)
flex-end	从尾部开始
center	在侧轴居中对齐
space-arround	平分剩余空间
space-between	先两边贴边再平分剩余空间
stretch	拉伸

5.flex-wrap： 设置子元素是否换行

属性值	说明
nowrap	不换行(默认值)
wrap	换行

6.flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
例如 flex-flow：row wrap；即设置主轴横向排列 且 换行

---

flex布局子项常用属性

• flex： 子项目占的份数
• align-self： 控制子项在侧轴的排列方式
• order属性定义子项目的排列顺序

1.flex： 子项目占的份数
定义子项目分配剩余空间所占份数
语法：
flex：<number>
例如：
一个添加flex布局的父盒子有3个div，它们分别所占份数为1、2、3。
可知将剩余空间一共分成了1+2+3=6份
所以它们其实就分别分配了剩余空间的1/6、1/3、1/2。

2.align-self： 控制子项在侧轴的排列方式
align-self允许单个单个项目与其他项目不一样的对齐方式，可覆盖align-items属性。可选属性与align-items一样，默认值为auto，表示继承父元素align-items属性，如果没有父元素，则等同于stretch。

3. order属性定义子项目的排列顺序
子项目order数值越小，排列越靠前，默认为0。