Flex布局

Flex

Flex布局（弹性布局）：是一种浏览器提倡的布局模型，布局网页更简单、灵活；避免浮动所产生的脱标问题

使用

设置方式：给父元素添加 display：flex, 子元素可以自动的挤压或拉伸。

组成部分:弹性容器 弹性盒子 主轴 侧轴（交叉轴）

​ 默认主轴水平，默认侧轴垂直

主轴对其方式

使用justify-content调节元素在主轴的对齐方式，在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距

修改主轴对齐方式属性：justify-content

属性值	作用
flex-start	默认值，起点开始依次排列
flex-end	重点开始依次排列
center	沿主轴居中排列
space-around	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-between	弹性盒子沿主轴均匀排列，空白间距均分在相邻盒子之间
space-evently	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

space-around：将间距加在盒子的两侧，子级时间的距离是父级两头距离的2倍

侧轴对齐方式

使用align-items调节元素在侧轴的对齐方式

修改侧轴对齐方式属性：

• align-items(添加到弹性容器)
• align-self：控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）

属性值	作用
flex-start	默认值，起点开始依次排列
flex-end	终点开始依次排列
center	沿侧轴居中排列
stretch	默认值，弹性盒子沿主轴线被拉伸至铺满容器(子级若有高度，则不会拉伸)

伸缩比

flex属性也能修改弹性盒子伸缩比

属性：flex 值 值-> 整数

注意:只占用父盒子剩余尺寸

改变主轴方向

使用flex-direction改变主轴方向，从而改变元素排列方向(应用于父元素)

主轴默认是水平方向，侧轴默认是垂直方向

属性值	作用
row	行，水平（默认值）
column	*列，垂直
row-reverse	行，从右向左
row-column	列，从上向下

改变轴方向后，轴名依然不变，对齐属性依然根据轴名选择（主轴变换方向后，垂直居中用justify-content,水平居中用：align-items）

弹性盒子换行

当父级盒子小于子级盒子的总大小时，而且使用了flex弹性布局，此时子级盒子会被压缩

使用flex-wrap实现单行盒子多行排列效果(应用于父级)

flex-wrap:wrap

调整行的对齐方式：align-content （应用于父级）

​ 取值与justify-content基本相同（缺少space-evently）