---恢复内容开始---
flex，意为弹性布局；
flex的样式属性分为两种，一个是作用在容器上的，即设置为flex的元素，一个是作用在成员上的；
1、作用在容器上的属性
flex-direction:设置容器排列方向，默认主轴即水平方向；属性值：row、row-reverse 、column、column-reserve
flex-wrap:元素换行，即子元素在轴线上放不下时是否换行以及如何换行;属性值：nowrap（不换行）、wrap（换行）、wrap-reverser（换行反转）
flex-flow:flex-direction和flex-wrap的简写
justifty-content：主轴的对齐方式，不一定是水平轴，由flex-direction指定；属性值：center(居中对齐)、space-between(两边对齐均匀分布)、space-around(项目两侧等间隔)、flex-start(起始对齐)、flex-end(结束对齐)、space-evenly(均匀分布)
align-items:交叉轴对齐方式;属性值：：center(交叉轴中点)、flex-start(交叉轴起点)、flex-end(交叉轴终点)、baseline（文字基线）、stretch(未设置高度时填充容器)
align-content：多轴对齐方式，只有一轴的时候没有效果
2、元素属性
为每一个成员设置单独属性：order、flex-grow、flex-shrink、flex-basis、flex、align-self
order:顺序，从小到大，值越小，排列越靠前flex-shrink：缩小比例（容器宽度<元素总宽度时如何收缩）
实例：弹性容器#container宽度是200px，一共有三个弹性元素，宽度分别是50px、100px、120px。在不折行的情况下，此时容器宽度是明显不够分配的，flex-shrink默认为1，也就是当不够分配时，元素都将等比例缩小，占满整个宽度，结果为：弹性元素1：50px→37.03px；弹性元素2：100px→74.08px；弹性元素3：120px→88.89px
flex-grow：放大比例（容器宽度>元素总宽度时如何伸展）
实例：弹性容器#container宽度是200px，但此时只有两个弹性元素，宽度分别是50px、100px。此时容器宽度是有剩余的。
情况一：flex-grow都为0，即使存在剩余空间，也不放大；
情况二：flex-grow为大于零的值，实现容器剩余宽度的分配比例设置。flex-grow分别为2和3，结果为70px 和 130px;
情况三：弹性容器的宽度正好等于元素宽度总和，无多余宽度，此时无论flex-grow是什么值都不会生效。
flex-basis：设置的是元素在主轴上的初始尺寸，所谓的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸。
flex： flex-grow + flex-shrink + flex-basis
flex: 1 = flex: 1 1 0%
flex: 2 = flex: 2 1 0%
flex: auto = flex: 1 1 auto;
flex: none = flex: 0 0 auto; // 常用于固定尺寸 不伸缩