flex布局

• flex子项目在主轴的缩放比例 ：flex: 2; 约束份数,整数值(使用后宽高失效). 如果用百分数,要加起来是100才可以用. 可实现圣杯布局

• flex-direction调整主轴方向：row 、row-reverse、 column 、column-reverse

• flex-wrap控制是否换行： nowrap、wrap、wrap-reverse;

• flex-flow是flex-direction、flex-wrap的简写形式

• align-items调整侧轴对齐（垂直对齐）（单行）stretch; 默认值。项目被拉伸以适应容器。center; 项目位于容器的中心。flex-start; 项目位于容器的开头。垂直对齐开始位置 上对齐、 flex-end; 项目位于容器的结尾。垂直对齐结束位置 底对齐

• align-content堆栈（由flex-wrap产生的独立行）多行垂直对齐方式齐

• • stretch; 默认值。项目被拉伸以适应容器。center; 项目位于容器的中心。flex-start; 项目位于容器的开头。flex-end; 项目位于容器的结尾。 space-between; 项目位于各行之间留有空白的容器内。(中间空白)、space-around 项目位于各行之前、之间、之后都留有空白的容器内。(空白包裹项目)

  • 必须设置以下属性才会起作用。对父元素设置自由盒属性display:flex；设置排列方式为横向排列flex-direction:row；设置换行flex-wrap:wrap;

• align-self自己的对齐方式；

• justify-content调整主轴对齐（水平对齐）

• order控制子项目的排列顺序：用整数值来定义排列顺序，数值小的排在前面。可以为负值。 默认值是 0