携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情
flex布局顾名思义就是弹性布局，它为盒模型提供最大的灵活性，也是目前使用较为广泛的一种布局方式 任何一种元素都可以指定为flex布局
.wrap{
display:flex;
}
使用时应该注意些什么？
- 如果是Webkit内核的浏览器，需要加上 -webkit 前缀
- 在父级元素设置为flex布局后，子元素的float、clear、vertical-align属性都将失效，所以在使用flex布局时，不应该先设置完子元素布局后再使用。
容器和项目 采用flex布局的元素（父）被称作容器。 在flex布局中的子元素被称作项目。 容器有以下几个常用属性：
- flex-direction
- flex-wrap
- flew-flow
- justify-content
- align-items
- align-content
flex-direction 属性设置容器主轴的方向
.wrap{
flex-direction:row | row-reverse | column | column=reverse;
//row:默认值，表示沿水平方向，由左到右。
//row-reverse ：表示沿水平方向，由右到左。
//**column**：表示垂直方向，由上到下。
//**column-reverse**:表示垂直方向，由下到上
}
flex-wrap属性用于设置当项目在容器中一行无法显示的时候如何处理
.wrap{
flex-wrap:nowrap | wrap | wrap-reverse;
}
- nowrap：表示不换行（若项目设置了宽度就失效了，强行在一行显示）
- wrap：正常换行，第一个位于第一行的第一个
- wrap-reverse：向上换行，第一行位于下方
flex-flow属性是flex-deriction和flex-wrap属性的简写，默认值为[row nowrap];,
- 第一个属性值为flex-direction的属性值
- 第二个属性值为flex-wrap的属性值
justify-content 属性与flex-direction类似，不过他是用于设置项目在容器(主轴)中的对齐方式。
.wrap{
justify-content: flex-start | flex-end | center |space-between | space-around
//flex-start：默认值，左对齐
//flex-end：右对齐
//center：居中对齐
//space-between：两端对齐
//space-around：每个项目两侧的间距相等
}
align-items 属性与justify-content类似，不过他是定义了项目在交叉轴上是如何对齐显示的
.wrap{
align-items:flex-start | flex-end | center | baseline | stretch
}
该属性主要有五个属性值：（以交叉轴从上向下为例）
- flex-start:交叉轴的起点对齐
- flex-end 交叉轴的终点对齐
- center 交叉轴居中对齐
- baseline 项目的第一行文字的基线对齐
- stretch：默认值：如果项目未设置高度或者高度为auto，将占满整个容器的高度
同样项目也有一些属性： order属性
order属性设置项目排序的位置，默认值为0，数值越小越靠前
.item{
order:99;
}
flex-grow 属性
flex-group属性用来控制当前项目是否放大显示。默认值为0，表示即使容器有剩余空间也不放大显示。如果设置为1，则平均分摊后放大显示。
.green-item{
order:-1;
flex-grow:1;
}
flex-shrink 属性
flex-shrink属性表示元素的缩小比例。默认值为1，如果空间不够用时所有的项目同比缩小。如果一个项目的该属性设置为0，则空间不足时该项目也不缩小。
flex-basis属性
flex-basis属性表示表示项目占据主轴空间的值。默认为auto，表示项目当前默认的大小。如果设置为一个固定的值，则该项目在容器中占据固定的大小。
flex属性
flex属性是 flex-grow属性、flex-shrink属性、flex-basis属性的简写。默认值为：0 1 auto
