Flex速查手册

本文由 高峰 投稿

1. Flex容器属性

• flex-direction 控制Flex项目在Main-Axis上的排列方向。
  • row ：沿着Main-Axis从左向右，水平排列。(另row-reverse )
  • column ：沿着Cross-Axis从上到下垂直排列。(另column-reverse)
• flex-wrap 换行。
  • wrap ：Flex项目在Flex容器内换行排列
  • nowrap ：Flex项目在Flex容器内不换行排列。
  • wrap-reverse
• flex-flow: flex-direction + flex-wrap
• justify-content 控制Flex项目在Main-Axis上的对齐方式。
  • flex-start : 所有Flex项目靠Main-Axis开始边缘（左对齐）。
  • flex-end ： ~~~~~~~~~~~~~~~~~~~~~~~~结束边缘（右对齐）。
  • center ： 让所有Flex项目排~~~~~~~~~~中间（居中对齐）。
  • space-between ： 让除了第一个和最一个Flex项目的两者间间距相同（两端对齐）。
  • space-around ： 让每个Flex项目具有相同的空间。
• align-items 控制Flex项目在Cross-Axis上的对齐方式。
  • stretch : 让所有的Flex项目高度和Flex容器高度一样。
  • flex-start
  • flex-end
  • center: 所有Flex项目在Cross-Axis上沿着他们自己的基线对齐。
  • baseline
• align-content 用于多行的Flex容器。
  • flex-start || flex-end || center || stretch。

2. Flex项目属性

• flex-grow 默认为 0 有额外空间保持自身宽度； 1: 有额外空间会撑开（grow了）。
• flex-shrink 默认为 1 , 没有额外空间保持自身宽度; 0: 维持被压缩平均的宽度。
• flex-basis 可以指定Flex项目的初始大小。也就是 flex-grow 和 flex-shrink 属性调整它的大小以适应Flex容器之前。默认为 auto。
• flex （速记) => flex-grow 第一，然后是 flex-shrink，最后是 flex-basis。缩写成GSB。
  • 默认： flex: 0 1 auto;
  • flex: none => flex: 0 0 auto; , 宽度被自动计算，不过弹性项目始终不会伸展或者收缩。
  • 相对flex项目flex: auto => flex: 1 1 auto , 宽度被自动计算，不过如果有必要，会伸展或者收缩以适应整个可用宽度。
  • 绝对flex项目flex: "positive number" => flex: “正数” 1 0 。
    • 将弹性项目的初始宽度设置为零，伸展项目以填满可用空间，并且最后只要有可能就收缩项目。
    • 当有多个弹性项目，并且其初始宽度 flex-basis 被设置为基于零的任何值时，弹性项目的宽度被根据 flex-grow 值的比例来计算。
• align-self 改变一个弹性项目沿着侧轴的位置, 不影响相邻的弹性项目。
  • auto || flex-start || flex-end || center || baseline || stretch。
  • order ，Flex项目会根据order值从底到高重新排序。

3. Auto-margin 对齐

当在Flex项目上使用 margin: auto 时，值为auto 的方向（左、右或者二者都是）会占据所有剩余空间。

4. FFC (flex formatting context)

Flexbox 布局新定义了格式化上下文，类似 BFC（block formatting context）。除了布局和一些细节不同以外的一切规则都和 BFC 是相同的。

与BFC的细微区别

• vertical-align、float 和 clear对Flexbox中的子元素是没有效果的。
• Flexbox 下的子元素不会继承父级容器的宽

flex item（flex项目）

CSS解析器会把子元素外部装进一个看不见的盒子里，我们通过排列这些盒子来达到排序、布局、 伸缩的目的。

子元素中包括了 标签节点 以及 文本节点。标签节点很容易理解，需要注意的是文本节点。

默认情况下，flex 会将 连续的文本节点 装进 flex-item 之中，使文本可以和标签节点一起排序和定位。

空格也是文本节点，所以 white-space 会影响Flexbox 中的布局：

5. flex-item-size 如何计算的

item-size（尺寸）为主轴方向上item的 content 再加上自身的margin、 border 和 padding 就是这个 item 的尺寸。

规则：

1. 子元素没有内容和默认固定宽高

flex-basis > width[height]: 非auto;

2. 元素存在默认宽高

如果子元素有默认固定宽高、并且设置了 flex-basis，那么它的 content 取 flex-basis 和 固定宽高中较大的, 且以固定宽高为下限。

3.元素存在 min-width[height] 或者 max-width[height]

如果子元素有min-width[min-height] 的限制，那么content取 flex-basis 和 min-width[min-height] 中较大的，且以**min-width值为下限**。

如果 min-width[min-height] 的值已经超出了容器的尺寸，那么即使设置了 flex-shrink, CSS解析器也不会用这个item的 content shrink，而是坚持保留它的min-width[min-height]。

反之，如果设置了 max-width[height] 的值，那么设置 flex-basis 无法超过这个值，对于flex-grow 也仅仅只会增长到 max-width[height] 这个上限。

4. width[height]: auto; 优先级等于 flex-basis。

两者谁大取谁

参考：

1. flex-cheatsheet (opens new window)
2. understanding-flexbox-everything-you-need-to-know (opens new window)
3. flexbox-layout-and-calculation (opens new window)

思维流图。