flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。主要有一下几点优势,任何一个容器都可以指定为 Flex 布局.
第一，屏幕和浏览器窗口大小发生改变也可以灵活调整布局；
第二，可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小；
第三，可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；
第四，可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；
第五，可以控制元素在页面上的布局方向；
第六，可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。
采用flex布局的元素被称为容器，其内部所有子元素称为项目。
1、容器属性
flex-direction:flex布局中元素的排列方式，默认值row.
row:从左到右水平排列 row-reverse:从由到左水平排列
column:从上到下垂直排列 column-reverse:从下到上垂直排列
flex-wrap:设置flex容器中当一行中的内容超过容器宽度时的排列方式，默认值nowrap.
nowrap:将超过的内容强行挤到同一行，当元素间有margin值时会压缩margin值，没有时会压缩每个元素的宽度。
wrap:将超过的元素放到下一行。
wrap-reverse:将超过的元素放在当前行，而没有超过的元素放在下一行。
flex-flow:flex-direction与flex-wrap组合写法，默认值row nowrap.
justify-content:用于设置容器内元素在水平方向上的对齐方式，默认值flex-start.
flex-start:左对齐 flex-end:右对齐 center:居中
space-between:元素紧贴容器左右两端，元素间的间距相同。
space-around:元素与容器左右两端距离为元素间距离的一半，元素间的距离相同。
space-evenly:元素间的间距相同，且两端元素和元素间的间距也是相同的。
align-items:设置容器内元素在垂直方向上的对齐方式，默认值stretch.
flex-start:以容器顶部来对齐 flex-end:以容器底部来对齐
center:以容器中间来对齐 baseline:按容器内元素的文字来对齐 stretch:当容器内元素未设置高度时默认沾满整个容器高度
align-content:设置了容器内多行元素的对齐方式，只有一行时该样式无效，默认值stretch.
flex-start:第一行紧贴顶部 flex-end:最后一行紧贴底部
center:中间一行居中，其他行紧贴中间行
space-between:不同行行间距相同，第一行和最后一行与容器顶部底部紧贴
space-arount:不同行行距相同，第一行和最后一行与容器顶部底部距离为行距一半 stretch:各行沾满容器
2、元素属性
order:用于决定元素排列顺序，数值越小，元素排列越靠前，默认值0.
flex-grow:定义元素的放大比例，默认值0（如果存在剩余空间也不放大）。如果所有项目的flex-grow属性都为1，则他们将等分剩余空间（如果有的话）；如果一个项目的flex-grow属性值为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
flex-shrink:定义元素的缩小比例，默认值1（如果空间不足将缩小）。如果一个元素的flex-shrink属性值为0，其他元素都为1，则空间不足时，前者不缩小。负值对该属性无效。
flex-basis:定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性计算主轴是否有多余空间，默认值auto(项目本来大小）。他可以设定为跟width height属性一样的值（200px），即项目将占据固定空间。
flex:flex-grow flex-shrink flex-basis三者的简写，默认值0 1 auto，后两个属性可选。
align-self:允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items，默认值auto，标识继承父元素的align-items属性，如果没有父元素，则等同于stretch .与align-items属性值相比多了auto，其他一样。
3、示例
<style>
.div_row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
align-content: stretch;
width: 100%;
height: 200px;
}
.div_row div {
width: 200px;
background-color: red;
margin-left: 10px;
}
.div_row2 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
align-content: stretch;
width: 100%;
height: 200px;
}
.div_row2 div {
width: 200px;
background-color: rgb(136, 255, 0);
margin-left: 10px;
}
.div1 {
order: 1;
flex-grow: 1;
flex-shrink: 1;
/* width: 300px; 设定flex-basis时 width无效 */
flex-basis: 400px;
align-self: center;
}
.div2 {
order: 0;
flex-grow: 0;
flex-shrink: 1;
/* width: 300px; 设定flex-basis时 width无效 */
flex-basis: 400px;
align-self: auto;
}
.div3 {
order: 0;
flex-grow: 0;
flex-shrink: 1;
/* width: 300px; 设定flex-basis时 width无效 */
flex-basis: 400px;
align-self: auto;
}
</style>
<div class="div_row">
<div>元素1</div>
<div>元素2</div>
<div>元素3</div>
<div>元素4</div>
<div>元素5</div>
<div>元素6</div>
<div>元素7</div>
</div>
<div class="div_row2">
<div class="div1">元素1</div>
<div class="div2">元素2</div>
<div class="div3">元素3</div>
</div>
