flex 弹性布局
弹性盒子是一种用于按行或按列布局的一维布局方法，元素可以膨胀以填充额外的空间，收缩以适应更小的空间
主轴与交叉轴
默认横的主轴，竖的交叉轴
flex 容器
flex 容器：flex-direction | flex-wrap | flex-flow | justify-content | align-items | align-content
flex-direction（改变轴方向）
- row 默认，横为主轴
- row-reverse 横主轴反向
- column 设置列为主轴
- column-reverse 列主轴反向
flex-wrap（换行）与 flex-flow（缩写）
flex-wrap
- nowrap 默认，无换行
- warp 换行
- wrap-reverse 反向换行
flex-flow：[flex-direction][flex-wrap]
just-content（主轴对齐）
- flex-start 默认，开头对齐
- flex-end 结尾对齐
- center 中间对齐
- space-around 闲散对齐，开头空隙和结尾空隙 = 中间空隙 / 2
- space-between 两端对齐，开头和结尾无空隙，中间空隙相等
- space-evenly 平均对齐，开头空隙，结尾空隙和中间空隙都相等
align-content（交叉轴对齐）
当不换行的情况下，
align-content不生效，所以必须配合flex-wrap: wrap;使用
- stretch 默认，拉伸：当子元素不设置高度时拉伸为父容器的高度
- flex-start 开头对齐
- flex-end 结尾对齐
- center 中间对齐
- space-around 闲散对齐，开头空隙和结尾空隙 = 中间空隙 / 2
- space-between 两端对齐，开头和结尾无空隙，中间空隙相等
- space-evenly 平均对齐，开头空隙，结尾空隙和中间空隙都相等
align-items（行对齐）
- stretch 默认，拉伸
- flex-start 顶部对齐
- flex-end 底部对齐
- center 中间对齐
- baseline 底线对齐
下面是一些布局案例
内联与块级元素居中布局
内联元素居中
- 单行居中：line-height 等于父容器 height
- 多行居中：display: flex;
- 多行居中：display: table-cell;
块级元素居中
- 使用 flex 居中
- 使用 position 绝对定位居中
不定项居中布局
- 使用 flex 居中
- 使用 position 绝对定位居中
均分列布局
- 使用 flex 均分列
- 使用 float + position 布局（例子中没自适应）
子项分组布局
- 使用 flex + 分组
- 使用 flex + margin-right:auto 自适应
flex 子项
flex 子项：order | flex-grow | flex-shrink | flex-basis | flex | align-self
flex-grow（扩展比例）
- 0 默认值，表示不占用剩余的空白间隙扩展自己的宽度
- 大于等于 1 时，占满所剩空间
- 小于 1 时，就按比例占所剩空间，比如： 0.5 占一半
- 子元素都是设置了 flex-grow，就各子元素按比例
具体看例子里的计算
flex-shrink（收缩比例）
- 1 默认值，表示 flex 容器空间不足时，元素的收缩比例
- 为 0 时，不收缩，多出空间会溢出
- 大于等于 1 时，自动收缩，跟容器大小相同
- 小于 1 时，多出空间按比例收缩，比如： 0.5 多出空间收缩一半
- 子元素都是设置了 flex-shrink，就各子元素按比例
具体看例子里的计算
flex-basis（主轴大小）与 flex（缩写）
flex-basis
- auto 默认值，指定了 flex 元素在主轴方向上的初始大小
- 固定大小值：100px 50%
- 0 没有宽度，自适应高度
flex: [flex-grow][flex-shrink][flex-basis]
order 及 align-self
order
- 0 默认值，改变某一个 flex 子项的排序位置
- 数值越小，越排前面
align-self
- auto 默认值，控制单独某一个 flex 子项的垂直对齐方式
- 其他值跟 align-items 一样
下面是一些布局案例
等高布局
- 使用 flex 实现
- 使用 float + margin-bottom + padding-bottom 技巧
两列与三列布局
- 使用 flex 实现
- 使用 float + overflow 技巧
Sticky Footer布局
中间内容区域不管多高，footer 区域都粘在底部
溢出项布局
- 使用 flex 布局
- 使用 float 需要计算宽度
综合案例
利用 flex 布局完成复杂布局
模拟 Swiper 轮播图
只实现布局，没实现效果
模拟知乎导航
只实现布局，没实现效果