flex布局

flex布局之元素宽度相等

在父元素设置

• display：flex；

然后在子元素 设置

• flex：1；

flex布局之显示方式
flex-direction 主轴对齐方式 默认 row 可设置为

• row 主轴为水平方向，起点在左端
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿
• column-reverse：主轴为垂直方向，起点在下沿

flex-wrap ：定义子元素超过一行，如何换行 值可为

• nowrap（默认值）：默认不换行。 如果子元素超过父元素的宽度或者高度，会自动在主轴方向压缩
• wrap：换行，第二行在第一行下面，从左到右
• wrap-reverse：换行，第二行在第一行上面，从左到右

justify-content: 子元素在主轴对齐方式 ，值可为

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center：居中
• space-between：两端对齐，项目之间的间隔都相等
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

align-items：交叉轴如何对齐，如果flex-direction：row和row-reverse 那么交叉轴就是y轴，如果是column和column-reverse那么交叉轴是x轴

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。以第一个子元素文字的基线对齐
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。子元素不设置高度，那么高度将沾满整个父元素

子元素项目

• order 子元素排列的位置默认是按照html先后顺序来排列的，html结构谁在前面默认就排列在前面；order的作用就是改变子元素排列顺序，默认（0），值越小越靠前，
• flex-grow 放大比例 默认是0 当有放大空间的时候，值越大，放大的比例越大
• flex-shrink:缩小比例 默认是1 值越大，宽度越小；
• align-self:允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。