flex布局

1.Flex布局/弹性布局： 是一种浏览器提倡的布局模型，布局网页更简单、灵活，还可以避免浮动脱标的问题，非常适合结构化布局。

2.设置方式： 父元素添加 display: flex，子元素可以自动的挤压或拉伸。在Flex布局模型中，可以通过调节主轴或侧轴的对齐方式来设置盒子之间的间距。

3.组成部分： 弹性容器、弹性盒子、主轴、侧轴 / 交叉轴

一、主轴对齐

1.原理： 使用justify-content调节元素在主轴的对齐方式

2.主轴对齐常见的属性值：

（1）flex start:默认值，表示从起点开始依次排列；

（2）flex-end：终点开始依次排列；

（3）center：沿主轴居中排列；

（4）space-around：弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧；

（5）space-between：弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间；

（6）space-evenly：弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等。

（7）justify-content:stretch：默认效果, 弹性盒子沿着侧轴线被拉伸至铺满容器；

二、测轴对齐

1.原理： 使用align-items调节元素在侧轴的对齐方式。

2.修改侧轴对齐方式属性:

（1）align-items（添加到弹性容器-父级 ）；

（2）align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子-子级）。

3.侧轴对齐常见的属性值：

（1）justify-content:flex-start：起点开始依次排列；

（2）justify-content:flex-end：终点开始依次排列；

（3）justify-content:center：沿侧轴居中排列；

三、伸缩比

1.原理： 使用flex属性修改弹性盒子伸缩比。

2.注意事项：

（1）只占用父盒子剩余尺寸；

（2）是给子盒子添加这个属性。

3.圣杯布局 圣杯布局是比较典型的布局，所谓的圣杯布局就是左右两边大小固定不变，中间宽度自适应。一般这种布局方式适用于各种移动端顶部搜索部分，这是最常见的，如京东手机版主页面顶部搜索。

4.圣杯布局的核心思路：

（1）两侧盒子写固定大小；

（2）中间盒子 flex: 1; 占满剩余空间。

5.注意：

（1）在flex眼中，标签不再分类。简单说就是没有块级元素，行内元素和行内块元素之分，任何一个元素都可以直接给宽度和高度一行显示，弹性盒子是标准流，可以设置宽高，默认排在一行；

（2）Flex不存在脱标的情况：也就是基本淘汰了浮动，更不用清除浮动；

（3）当然存在兼容性问题，如果不考虑兼容性可以大量使用，如果是移动端则不用考虑直接flex；

（4）caniuse.com/ 可以查看兼容性。

四、主轴更换属性

1.原理： 主轴默认是水平方向, 侧轴默认是垂直方向，使用flex-direction改变元素排列方向

2.常见属性值

（1）主轴排列方向：flex-direction: column; 默认水平

（2）主轴居中：justify-content: center;

（3）侧轴居中：align-items: center;

（4）水平方向排列，默认值：flex-direction: row;

（5）水平方向从右到左排列：flex-direction: row-reverse;

五、弹性盒子换行

1.原理 使用flex-wrap实现弹性盒子多行排列效果； flex-wrap: wrap;

2.常见属性值

flex-wrap: wrap;侧轴居中,多行排列方式的前提条件是有flex布局换行

（1）反向换行：flex-wrap: wrap-reverse;

（2）多行居中：align-content: center;

（3）从起点开始排列 ：align-content: flex-start;

（4）从终点开始排列：align-content: flex-end;

（5）盒子上下两边靠边对齐：align-content: space-between;

（6）盒子上下 1:2 进行排列：align-content: space-around;

（7）盒子上下 1:1 进行排列 ：align-content: space-evenly;