版权声明：本文首发 http://asing1elife.com ，转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82862174
Flex 是 Flexible Box 的缩写，就是弹性布局，可以为盒子模型提供更大的灵活性
任何一个容器都可以指定为 Flex 布局，其将会成为未来布局的首选方案
更多精彩
- 更多技术博客，请移步 asing1elife’s blog
概念
- 采用 Flex 布局的元素称为 Flex 容器
- 容器下的所有子元素自动成为容器成员，成为 Flex 项目
- 将元素的
display: flex即可指定 Flex 容器 - 容器默认存在两根轴，水平的主轴和垂直的交叉轴
属性
flex-direction 决定主轴的方向，即项目的排列方向
- row [default] 主轴在水平方向，起点在左侧
- row-reverse 主轴在水平方向，起点在右侧
- column 主轴在垂直方向，起点在顶部
- column-reverse 主轴在垂直方向，起点在底部
flex-wrap 当一条轴线上无法排列所有子项，规定换行规则
- nowrap [default] 不换行
- wrap 换行，第一行在上方
- wrap-reverse 换行，第一行在下方
flex-flow 是 flex-direction 和 flex-wrap 的简写形式
- row wrap [default]
justify-content 定义项目在容器主轴上的对齐方式
- flex-start [default] 左对齐
- flex-end 右对齐
- center 居中
- space-between 两端对齐，每个项目之间的间距相等
- space-around 每个项目两侧的间隔相等，即项目之间的间隔比项目与容器边框的间隔大一倍
align-items 定义项目在容器交叉轴上的对齐方式
- stretch [default] 如何项目未设置高度，则每个项目默认占据整个容器高度
- flex-start 顶部
- flex-end 底部
- center 居中
- baseline 项目第一行文字的基线对齐
align-content 定义多条轴线的对齐方式，若容器只有一条轴线或容器没有多余空间，则不起作用
- stretch [default] 项目占满整个交叉轴
- flex-start 与交叉轴的顶部对齐
- flex-end 与交叉轴的底部对齐
- center 与交叉轴的中部对齐
- space-between 与交叉轴的两端对齐，轴线之间的间隔平均分布
- space-around 每条轴线两端的间隔相等，即轴线之间的间隔比轴线与边框的间隔要大一倍
