Flex布局

弹性容器（父级）+弹性盒子

作用：

基于flex精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。

flex布局非常适合结构化布局

**给父元素添加display：flex，**子元素可以自动的挤压和拉伸

默认主轴：X轴默认侧轴：Y轴

justify-content:flex-start

justify-content:flex-end

justify-content:center

盒子之间间距是两边间距的2倍

justify-content:space-around;

两边盒子间距为零

justify-content:space-between;

无论两边还是盒子间距离都一样

justify-contenr:space-evenly;

默认值，起点开始一次排列

align-items:flex-start;

终点开始依次排列

align-items:flex-end;

align-items:center

默认值，弹性盒子沿着主轴线被拉伸至铺满容器

align-items:stretch

单独控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）

align-self:center

弹性盒子没有给高度，弹性盒子高度默认拉伸到和弹性容器父盒子高度一样高，但是如果给了侧轴对齐align-items：center 那么盒子高度默认由内容撑开。

弹性盒子不给宽，弹性盒子宽度由内容撑开。

只占用父盒子剩余尺寸

取值份数：把父盒子所有剩余尺寸等比例划分，多少份占用多少等比例。

份数是所有父盒子内标签给的份数的和

flex:整数（份数）

align-content:center/flex-start/flex-end/space-between/space-around/space-evenly

flex-wrap:wrap/nowrap

设置主轴为Y轴则侧轴为X轴

宽度默认为父元素宽度，高度由内容撑开

默认内容左上，上下靠左排列

colum-reverse（默认左下）

flex-direction:column;

默认主轴X轴

默认内容左上，左右靠上排列

row-reverse（默认内容右上）

flex-direction:row;