子项目在侧轴的对齐方式 —— align-items
同时进行子项目主轴和侧轴对齐方式的设定 —— align-content
下面来看看每一个属性的取值和实现效果
flex-direction：
CSS Code复制内容到剪贴板
div{
flex-direction: row /*水平排列，默认*/
<row-reverse> /*水平排列，但子项目从右侧开始排列*/
<column> /*垂直排列*/
<column-reverse>; /*垂直排列，但子项目从下侧开始排列*/
}
测试中我令flex容器的宽度为100px，高为200px，定义了5个未定义宽高的子项目，演示了上述的四种排列情况。效果：
这里需要说明的是：在未定义子项目的伸缩方式时，默认是按子项目本身大小渲染的。
flex-wrap
CSS Code复制内容到剪贴板
div{
flex-direction: nowrap
/*当子项目在主轴上的总跨度大于主轴长度时，不进行换行，而是缩小每个子项目的跨度。默认*/
<wrap> /*—同上—进行换行显示*/
<wrap-reverse> /*从侧轴的末端进行换行（在主轴的排列方向不变）。实际不常用*/
}
测试中我定义了每个子项目的宽度为30px，flex容器还是原来的100px宽。效果：
由于这里设定的是子项目宽度，所以对于主轴为垂直方向的容器子项没什么影响。
flex-flow
CSS Code复制内容到剪贴板
div{
flex-flow: <flex-direction> || <flex-wrap>;
/*就是上述两个属性的结合简写 默认：flex-flow：row nowrap*/
}
