flex
基本概念
flex容器
容器
- 主轴
- 开始位置 -- main start
- 结束位置 -- main end
- 交叉轴
- 开始位置 -- cross start
- 结束位置 -- cross end
项目
- 默认沿主轴排列
- 主轴空间 -- mainsize
- 交叉轴空间 -- cross size
容器的属性
方向和换行
- flex-direction
- 决定主轴的方向
- row(默认值)
- row-reverse
- column
- column-reverse
- 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-end
- center
- baseline -- 项目的第一行文字的基线对齐。
- strecth（默认值） -- 如果项目未设置高度或为auto，将占满整个容器的高度
- align-content
- 多根轴线的对齐方式
- flex-start -- 与交叉轴的起点对齐
- flex-end -- 与交叉轴的终点对齐
- center -- 与交叉轴的中点对齐
- space-between -- 与交叉轴两端对齐，轴线之间的间隔平均分布。
- space-around -- 每根轴线两侧的间隔都相等
- stretch（默认值） -- 轴线占满整个交叉轴。
项目的属性
排序
- order
- 定义项目的排列顺序
- 数值越小，越靠前
大小缩放
- flex-grow
- 定义项目的放大比例
- 默认为0 -- 即存在剩余空间也不放大
- flex-shrink
- 定义项目的缩小比例
- 默认为1 -- 即如果空间不足，项目将缩小
- 0 -- 即使空间不足，也不缩小
- 负值无效
- flex-basis
- 定义了在分配多余空间之前，项目占据的主轴空间
- 默认值 auto -- 项目的本来大小
- 可以设置为固定大小，如350px
- flex
- 是 flex-grow, flex-shrink 和 flex-basis的缩写
- 默认值为 0 1 auto
- auto -- 1 1 auto
- none -- 0 0 auto
- 建议优先使用
对齐
- align-self
- 允许单个项目与其他项目不一样的对齐方式，可覆盖align-items
- 默认值 auto -- 表示继承父元素的align-items属性
