弹性盒子
布局方式：
元素本身在文档流中特点
盒模型
table布局
浮动：副作用高度塌陷
定位：注意参考原点
弹性盒子：用来代替浮动的
响应式布局
网格布局
·····
弹性盒子概念：
是一种布局方式，通过父元素去控制子元素，先给父元素开启弹性盒子，
这样就有很多预定义好的样式名和样式值可以控制子元素了
开启弹性盒子：
块元素： display：flex；
行内元素： display：inline-flex；
父元素==》弹性容器：谁开了弹性盒子，谁就是
子元素==》弹性元素:弹性容器的直接子元素
预定义样式
弹性容器:6个
弹性元素：6个
开启弹性盒子
css
display: flex;1、flex-direction: ; 控制主轴的方向
可选值：
row 默认值 主轴是水平方向，起点在左，侧轴是垂直方向，起点在上
row-reverse 主轴是水平方向，起点在右，侧轴是垂直方向，起点在下
column 主轴是垂直方向，起点在上，侧轴是水平方向，起点在左
column-reverse 主轴是垂直方向，起点在下，侧轴是水平方向，起点在上
主轴：弹性元素的排列方向称为主轴
侧轴：与主轴垂直方向的称为侧轴
- justify-content: ;控制主轴方向，弹性元素的布局
可选值：
flex-start 弹性元素主轴起点开始布局
flex-end 弹性元素主轴终点开始布局
center 弹性元素主轴居中布局
space-between 弹性元素主轴两端对齐布局
space-around 空白间距两端小，中间大布局
space-evenly 空白间距平均在弹性元素两侧
3、 flex-wrap: ; 控制是否换行
可选值：
nowrap 默认值，不换行
wrap 换行
wrap-reverse 换行且反转
4、align-items: ;控制单行侧轴的对齐方式
可选值：
flex-start 弹性元素侧轴起点开始布局
flex-end 弹性元素侧轴终点开始布局
center 弹性元素侧轴居中布局
5、align-content: ; 控制侧轴多行的对齐方式
可选值：
flex-start 弹性元素侧轴起点开始布局
flex-end 弹性元素侧轴终点开始布局
center 弹性元素侧轴居中布局
space-between 弹性元素侧轴两端对齐布局
space-around 空白间距两端小，中间大布局
space-evenly 空白间距平均在弹性元素两侧
6、flex-flow:主轴侧方向 是否换行;
flex(弹性盒子，伸缩盒)
是css中的又一种布局手段，它主要用来代替浮动来完成页面的布局
flex可以使元素具有弹性，让元素可以根据页面的大小的改变而改变
弹性容器
要使用弹性盒，必须先将一个元素设置为弹性容器
弹性元素
弹性容器的直接子元素是弹性元素（弹性项）
注意：一个元素可以同时是弹性容器和弹性元素
弹性容器的属性
1:flex-direction 2:flex-wrap
3:flex-flow 4:justify-content
5:align-items 6:align-content
弹性容器属性
1: flex-direction:;
2: flex-wrap: ;设置弹性元素是否在弹性容器中是否自动换行
可选值：
nowrap 默认值，元素不会自动换行
wrap 元素沿着辅轴方向自动换行
wrap-reverse 元素沿着辅轴反方向换行
3:flex-flow:wrap和direction的简写属性，且没有顺序要求
默认值 row nowrap
4:justify-content 如何分配主轴上的空白空间（主轴上的元素如何排列）
可选值：
flex-start 元素沿着主轴起边排列
flex-end 元素沿着主轴终边排列
center 元素居中排列
space-around 空白分布到元素的两侧
space-between 空白均匀分布到元素间
space-evenly 空白分布到元素的单侧（兼容性差一些）
弹性元素的样式
1、order:; 改变弹性元素的排列顺序，值越小，越靠前，默认是0
2、 flex-grow: ;控制占据剩余空间的比例
3、 flex-shrink: ;当空间不够，控制缩小比例
4、align-self: ; 覆盖父元素align-items