flex布局

什么是Flex布局？

Flex 布局是弹性布局 是一种浏览器提倡的布局模型

特点就是布局网页更简单、灵活，还可以避免浮动脱标问题 非常的适合结构化布局

怎么使用？

在父元素上添加css样式 

display： flex

 子元素可以自动的去挤压和拉伸

对齐方式有哪些？

有主轴和侧轴两种对齐方式

主轴对齐

修改主轴对齐方式属性：

justify-content

可以设置的属性值:

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

侧轴对齐

修改侧轴对齐方式属性:

align-items（添加到弹性容器）

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

可以设置的属性值:

属性值	作用
flex-start	默认值,起点开始依次排序
flex-end	终点开始依次排序
center	沿侧轴居中排序
stretch	默认值,弹性盒子沿主轴线被拉伸至铺满容器

伸缩比

属性:  flex: 值

取值为 数值(整数)  只占用父盒子剩余尺寸

主轴方向

在flex 布局模型中,弹性盒子默认沿着水平方向排列

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

修改主轴方向属性

flex-direction

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

弹性盒子换行

弹性盒子换行显示：

flex-wrap：wrap

调整行对齐方式

align-content    (取值与 justify-content基本相同)