# flex 布局基本特性
Flexible Box 模型(也称为flexbox)是一种一维的布局模型. 因为一个 flexbox 一次只能处理一个维度上的元素布局, 一行或者一列. CSS Grid Layout (opens new window) 是另一种二维布局
# 两根轴线(主轴和交叉轴)
我们在使用 flexbox 的所有属性都跟这两根轴线有关, 所以学习和理解它是非常有必要的. flexbox 的特性是沿着主轴或者交叉轴对齐之中的元素.
# 主轴
由 flex-direction 定义, 可以取四个值:
row主轴沿 inline 方向延伸row-reverse主轴沿 inline 方向延伸column主轴沿 block 排列的方向column-reverse主轴沿 block 排列的方向
inline 方向
block 排列方向
# 交叉轴
交叉轴垂直于主轴
设置为 row 或 row-reverse, 交叉轴方向沿着列向下
设置为 column 或 column-reverse, 交叉轴就是水平方向
# 起始线和终止线
flexbox 与 书写模式 的关系
如果 flex-direction: row, 在我书写英文时, 主轴的起始线是左边, 终止线是右边
而在我书写阿拉伯文时, 主轴的起始线是右边, 终止线是左边
在这两种情况下, 交叉轴的起始线是顶部, 终止线是底部.
总而言之, 用起始和终止来描述比左右更为贴切. 这对帮助理解其他相同模式的布局方法(例: CSS Grid Layout)有不小作用
# Flex 容器
文档中使用了 flexbox 的区域就称为 flex 容器. 通过设置 display属性值为 flex 或 inline-flex. 设置后CSS属性都会有初始值:
- 元素排列为一行 (
flex-direction初始值是row) - 元素从主轴起始线开始
- 元素不会在主维度方向拉伸, 但是可以缩小
- 元素被拉伸用来填充交叉轴
flex-basis(opens new window) 初始值是autoflex-wrap(opens new window) 初始值是nowrap
# 简写属性 flex-flow
flex-flow=flex-direction+flex-wrap
# flex 元素上的属性
-
定义元素在flex容器中分配剩余空间的相对比例. 默认值是
0, 取值范围[0, ∞]. 以flex-basis为基础, 沿主轴方向增长尺寸 flex-shrink(opens new window)定义元素的收缩规则.
-
定义该元素的空间大小. 默认值是
auto. 给宽则定宽, 无设定则自动分配大小以充分显示内容
# Flex 属性简写
flex=flex-grow+flex-shrink+flex-basis
大部分情况下可以采用预定义的简写形式:
flex: initial相当于flex: 0 1 autoflex: auto相当于flex: 1 1 autoflex: none设置元素不可伸缩, 但元素会按具有flex-basis: auto进行布局flex: <positive-number>, 例flex: 1相当于flex: 1 1 0,flex: 2相当于flex: 2 1 0, 元素在flex-basis: 0基础上伸缩
# 元素间的对齐和空间分配
Flexbox 的一个关键特性是能够设置 flex 元素沿主轴方向和交叉轴方向的对齐方式, 以及它们之间的空间分配.
# align-items
align-items (opens new window)使元素在交叉轴方向对齐. 初始值为 stretch
stretch弹性项包含外边距的交叉轴尺寸被拉升至行高flex-start元素向侧轴起点对齐flex-end元素向侧轴终点对齐center元素在侧轴居中
# justify-content
justify-content (opens new window)使元素在主轴方向对齐. 初始值为 flex-start
stretchflex-start从行首开始排列flex-end从行尾开始排列center向每行中点排列space-around每行上均分元素, 每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半space-between每行上均分元素, 相邻距离相同, 每行第一个元素与行首对齐，每行最后一个元素与行尾对齐space-evenly沿主轴均分元素, 相邻间距一致