CSS学习笔记: Flexbox属性简介与速查

基本构成

• flex container, 将 display 设置为 flex 的容器元素
• flex item, 容器内的子元素item
• main/cross axis, 主轴/交叉轴
• main/cross start/end, 主轴/交叉轴 的 首/尾
• main/cross size, 容器内的子元素item的 主轴尺寸/交叉轴尺寸

flexbox 相关属性

flexbox示例

1. flex-container 属性

• flex-direction, 主轴方向
  • row, 行, 从左到右（默认值）
  • row-reverse, 行排, 主轴反向, 从右到左
  • column, 列排, 从上到下
  • column-reverse, 列排, 主轴反向, 从下到上
• flex-wrap, 换行, 多行会导致多条轴线
  • nowrap, 内部item不换行（默认值）
  • wrap, 内部item换行
  • wrap-reverse, 内部item换行,交叉轴方向顺序反转
• justify-content, 设置主轴方向上item的排列对齐
  • flex-start, 主轴开始对齐（默认值）
  • flex-end, 主轴结束对齐
  • center, 居中对齐
  • space-between, 均匀分散对齐, 每个item之间留有等距空隙, 但 首item 和 尾item 与 main start/main end 不存在空隙
  • space-around, 均匀分散对齐, 每个item之间留有等距空隙, 且 首item 和 尾item 与 main start/main end 存在空隙, 空隙大小为 item间空隙的一半
• align-items, 设置items在每一行（flex-wrap控制换行）内的对齐
  • stretch, 交叉轴方向拉伸（默认值）
  • flex-start, 交叉轴开始对齐
  • flex-end, 交叉轴结束对齐
  • center, 交叉轴居中对齐
  • baseline, 基线对齐
• align-content, 多行导致多轴线情况下的设置, 设置每一行, 每一个轴线的对齐方式（每一行作为一个整体）
  • stretch, 交叉轴方向拉伸（默认值）
  • flex-start, 交叉轴开始对齐
  • flex-end, 交叉轴结束对齐
  • center, 轴线居中对齐
  • space-between, 均匀分散对齐, 每条轴线之间留有等距空隙, 但 首轴线 和 尾轴线 与 cross start/cross end 不存在空隙
  • space-around, 均匀分散对齐, 每条轴线之间留有等距空隙, 且 首轴线 和 尾轴线 与 cross start/cross end 存在空隙, 空隙大小为 轴线间空隙的一半

2. flex-items 属性

• order, 排列顺序
  • <integer>。默认为0
• flex-grow, item 在主轴方向上的拉伸权重值, 处理剩余的拉伸分配
  • <number> 负值无效，0表示不拉伸。默认为0
• flex-shrink, item 在主轴方向上的收缩权重值, 处理超出压缩的比例
  • <number> 负值无效，0表示不压缩。默认为1
• flex-basis, item 拉伸/收缩的基准大小值
  • auto 参照元素自己的width和height属性（默认值）
  • content 基于 flex 的元素的内容自动调整大小，【注意】是一个新的规范，可能无法实现低版本兼容，详见下面描述
  • <'width'> width 值可以是 <length>; 该值也可以是一个相对于其父弹性盒容器主轴尺寸的百分数 。负值是不被允许的。
• align-self, 对应 align-item, 单独设置该 item 的对齐模式
  • auto, 设置为父元素的align-items值，如果该元素没有父元素的话，就设置为 stretch（默认值）
  • stretch, 交叉轴方向拉伸
  • flex-start, 交叉轴开始对齐
  • flex-end, 交叉轴结束对齐
  • center, 交叉轴居中对齐
  • baseline, 基线对齐

3. flex-basis: auto/content 的演变

以下引用:MDN flex-basis

• content 由于最初规范中没有包括这个值，在一些早期的浏览器实现的flex布局中，content值无效，可以利用设置(width 或 height) 为 auto达到同样的效果.
• 最初, "flex-basis:auto" 的含义是 "参照我的width和height属性".
• 在此之后, "flex-basis:auto" 的含义变成了自动尺寸, 而 "main-size" 变成了 "参照我的width和height属性"。实际执行于 bug 1032922.
• 然后呢, 这个更改又在 bug 1093316 中被撤销了, 所以 "auto" 变回了原来的含义; 而一个新的关键字 'content' 变成了自动尺寸。 (bug 1105111 包括了增加这个关键字).

4. 简写属性: flex

flex是 flex-grow,flex-shrink和flex-basis的简写，语法如下

• 单值语法: 值必须为以下其中之一:
  • 一个无单位数(<number>): 它会被当作flex-grow的值
  • 一个有效的宽度(width)值: 它会被当作flex-basis的值
  • 关键字none, auto或initial
• 双值语法: 第一个值必须为一个无单位数，并且它会被当作flex-grow的值。第二个值必须为以下之一：
  • 一个无单位数(<number>): 它会被当作flex-shrink的值
  • 一个有效的宽度(width)值: 它会被当作flex-basis的值
• 三值语法:
  • 第一个值必须为一个无单位数，并且它会被当作flex-grow的值
  • 第二个值必须为一个无单位数，并且它会被当作flex-shrink的值
  • 第三个值必须为一个有效的宽度值, 并且它会被当作flex-basis的值

举例

• flex: 1; = flex-grow: 1;
• flex: 40px; = flex-basis: 40px;
• flex: 1 2;= flex-grow: 1;flex-shrink: 2;
• flex: 1 25%;= flex-grow: 1;flex-basis: 25%;
• flex: 0 0 auto; = flex-grow: 0;flex-shrink: 0;flex-basis: auto;