1.5 align-content设置侧轴上的子元素的排列方式（多行） 设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），单行的情况下是无效的 属性值 说明 flex-start 默认值在侧轴的头部开始排列 flex-end 在侧轴的尾部开始排列 center 在侧轴中间显示 space-around 子项在侧轴平分剩余空间 space-between 子项在侧轴先分布在两头，再平分剩余空间 stretch 设置子项元素高度平分父元素高度 1.5.1 flex-start（默认） 1.5.2 flex-end 在侧轴的尾部开始排列 1.5.3 center 1.5.4 space-around 1.5.5 space-between 1.5.6 stretch 去掉子元素的hight 1.6 align-content和align-items的区别 align-items 适用于单行情况下，只有上对齐、下对其、居中和拉伸 align-content 适用于换行（多行）的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值 总结就是单行找align-items多行找align-content 1.7 flex-flow flex-flow属性是flex-direction和flex-wrap的复核属性 2. 子项属性 flex 子项目占的份数 align-self 控制子项自己在侧轴的排列方式 order 属性定义子项的排列顺序（前后顺序） 2.1 flex 属性 flex属性定义子项目分配剩余空间，用flex来表示占多少份数。默认为0 例子1： 两端固定，中间自适应布局

1

2

3

例子2：等分份数 2.2 align-self控制子项自己在侧轴上的排列方式 align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示可以继承父元素的align-items属性，如果没有父元素，则等同于stretch。

1

2

3

2.3 order属性定义项目的排列顺序 数值越小，排列越靠前，默认为0 注意：和z-index不一样 section div:nth-child(1){ width: 150px; height: 150px; background-color: red; } section div:nth-child(3){ width: 150px; height: 150px; order: -1; background-color: blue; } section div:nth-child(2){ width: 150px; height: 150px; background-color: green; }