弹性盒布局之弹性容器 九期第六课

（1） 弹性容器的两种类型

（2） 弹性容器（盒子）导航

（3） 定义弹性容器的主轴方向: 弹性元素的主轴上的排列方向

（4） 创建网站首页

（5 & 6） 弹性元素溢出与创建多行容器，以主轴水平方向为例

（7 & 8）弹性元素在主轴上如何分布 & 使用弹性盒子对齐修改导航

（9）弹性元素在垂直方向（交叉轴）上的对其方式

(10) 总结：

10.1 Flex容器，将任何添加了 display: flex/inline-flex 样式的元素转为Flex容器

10.2 flex-direction，控制Flex容器中Flex元素的排列方向:

*  flex-direction: row: 从左到右水平排列(*默认值*)
*  flex-direction: row-reverse: 从右到左水平排列
*  flex-direction: column: 从上到下垂直排列
*  flex-direction: column-reverse: 从下到上垂直排列

10.3 flex-wrap， 控制元素在Flex容器宽度不足时, 单行显示还是换行显示:

*  flex-wrap: nowrap:  默认值, 不换行, 元素压缩显示
*  flex-wrap: wrap:  换行显示,元素不压缩
*  flex-wrap: wrap-reverse: 换行,并反向显示

10.4 flex-flow，排列方式, 换行方式, flex-direction 和 flex-wrap 属性的简写语法：

*  flex-direction: row nowrap:  默认值, 水平禁止换行
*  flex-flow: row wrap:  水平且允许换行
*  flex-flow: column nowrap:  垂直且不换行
*  flex-flow: column wrap:  垂直且换行

10.5 justify-content， 控制元素在Flex容器主轴上排列方式：

*  justify-content: flex-start : 从起始线(左)开始, 默认值
*  justify-content: flex-end : 从终止线(右)开始
*  justify-content: center : 所有元素居中排列
*  justify-content: space-between : 主轴上首尾元素紧贴起始线,剩余元素均分空间
*  justify-content: space-around : 主轴上每个元素两边空间相等，相邻空间累加
*  justify-content: space-evenly : 主轴上每个元素以及元素到起止点的空间全部相等

10.6 align-items， 控制元素在交叉轴上的排列方式：

*  align-items: stretch :  默认值 ,元素在交叉轴上自动拉伸到容器的高度
*  align-items: flex-start : 元素从容器的交叉轴起始线开始排列
*  align-items: flex-end : 元素从容器的交叉轴终止线开始排列
*  align-items: center : 元素位于交叉轴中心位置排列

10.7 align-content，只适用于在多行容器, 控制交叉轴上元素的排列和容器剩余空间的处理方式：

*  align-content: flex-start; :  默认顶部 , 起始线
*  align-content: flex-end; : 底部, 终止线
*  align-content: center : 居中
*  align-content: stretch : 元素拉伸高度填充全部空间
*  align-content: space-between : 交叉轴上首尾元素紧贴起始线,剩余元素均分空间
*  align-content: space-around : 交叉轴上每个元素两边空间相等，相邻空间累加
*  align-content: space-evenly : 交叉轴上每个元素以及元素到起止点的空间全部相等