CSS-结构-flex
CSS3 新增了弹性盒子模子( Flexible Box 或 FlexBox )，是一种新的用于在 HTML 页面实现结构的方式。使得 HTML 页面顺应不同尺寸的屏幕和不同的装备时，元素是可猜测地运行。基本概念
[*]容器：使用 display:flex 或 display:inline-flex 声明的元素，称为 Flex 容器（flex container），简称 容器
[*]项目：容器 中所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称 项目
[*]主轴：项目沿其一次排列的轴被称为 主轴。
[*]侧轴：垂直于主轴的轴被称为 侧轴。
容器的属性
[*]flex-direction
[*]定义了 主轴 的方向
[*]row：主轴为水平方向，出发点在左端（默认）
[*]row-reverse：主轴为水平方向，出发点在右端
[*]column：主轴为垂直方向，出发点在上沿
[*]column-reverse：主轴为垂直方向，出发点在下沿
[*]flex-wrap
[*]默认情况，所有项目会在一行显示，如需换行，使用 flex-wrap
[*]nowrap：不换行（默认）
[*]wrap：换行，第一行在上方
[*]wrap-reverse：换行，第一行在下方
[*]flex-flow
[*]该属性是 flex-direction 和 flex-wrap 的简写，默认值为 row nowrap，水平排列，不换行。
[*]justify-content
[*]定义了项目沿着 主轴线 的对齐方式
[*]flex-start: 项目左对齐（默认）
[*]flex-end: 项目右对齐
[*]center: 项目居中对齐
[*]space-between: 项目两头对齐，容器首尾不留距离，项目之间的隔断都相当
[*]space-around: 项目两头对齐，容器首尾留有距离
[*]align-items（适用于不换行的情况）
[*]定义了项目所在 侧轴线 的对齐方式
[*]flex-start: 侧轴 出发点对齐，如果 flex-direction:row，则项目顶部对齐
[*]flex-end: 侧轴 终点对齐，如果 flex-direction:row，则项目尾部对齐
[*]center: 项目居中对齐
[*]baseline: 项目标 第一行笔墨的基线 对齐
[*]stretch: 如果项目 未设置高度 或者 设为auto，拉伸与容器同高（默认）
[*]align-content（多行情况时适用）
[*]定义了项目所在侧轴线的对齐方式
[*]flex-start: 侧轴 出发点对齐
[*]flex-end: 侧轴 终点对齐
[*]center: 侧轴 居中对齐
[*]space-between: 两头对齐，容器首尾不留距离
[*]space-around: 两头对齐，容器首尾留有距离
[*]stretch: 如果项目 未设置高度 或者 设为auto，拉伸与容器同高（默认）
项目属性
[*]order：项目标排列顺序
[*]数值越小，排列越靠前，可以为负值
[*]order:0，保持项目原来的位置（默认）
[*]flex-grow（扩大）：定义项目标放大比例
[*]默以为0：如果容器存在剩余空间，保持原巨细，不放大
[*]项目 flex-grow 属性都为 1：项目平均分配剩余空间
[*]某个项目 flex-grow 属性为 2，其他项目都为 1，那么为 2 的项目宽度为 1 的 2 倍
[*]flex-shrink（缩小）：定义项目标缩小比例
[*]默以为1：如果容器空间不敷，项目缩小
[*]项目 flex-shrink 属性都为 1，当容器空间不敷时，所有项目等比缩小
[*]某个项目 flex-shrink 属性为 0，其他项目都为 1，当容器空间不敷时，为 0 的项目不缩小
[*]flex-basis：分配多余空间之前，项目占据主轴空间的巨细，相当于为项目设置宽度
[*]默认值：auto，保持项目标本来巨细，不作任何宽度改变
[*]可以定义项目标宽度（如200px）
[*]也可以设置 flex-basis:10%，将占据空间的10%
[*]flex（常用）：flex-grow flex-shrink flex-basis 的缩写
[*]默认值：0 1 auto，不放大，但缩小；
[*]auto（1 1 auto）：平分放大缩小
[*]none（0 0 auto）：不放大，不缩小
[*]flex:1 相当于只设置了 flex-grow
[*]align-self：定义项目在侧轴的对齐方式。该属性可覆盖 align-items 属性。
[*]答应单个项目与其他项目不一样的对齐方式，可覆盖 align-items 属性。
[*]默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch
[*]flex-start | flex-end | center | baseline | stretch 与 align-items 属性完全一致
页:
[1]