Flex 的浏览器支持情况如下:

ChromeSafariFirefoxOperaIEAndroidiOS
20- (old)21+ (new)3.1+ (old)6.1+ (new)2-21 (old)22+ (new)12.1+ (new)10 (tweener)11+ (new)2.1+ (old)4.4+ (new)3.2+ (old)7.1+ (new)

老的实现基本不用这里就不提了。


先讲下 flex-basis 属性,其它的某度都能搜索到。

flex-basis 属性

  • 如果该属性被定义,会覆盖掉 width 属性。
  • 如果该属性没被定义,值默认为 auto,会回退到元素的 width 属性。
  • 该属性受 max-width 和 min-width 的限制。
  • 该属性不是指定绝对宽度,而是指定元素放入到 flex 容器之前的尺寸,即容器空间不够时元素会收缩,空间够时拉伸。

计算步骤

  • 首先根据每个元素的 flex-basis 属性计算每个元素的可能的尺寸。
  • 基于 flex-wrap 属性分析应该将元素分配到几行中。
  • 根据 flex-grow 与 flex-shrink 属性计算元素的最终尺寸。
  • 根据 justify-content 属性计算元素在主轴上的排布。
  • 根据 align-items、align-content、align-self 属性计算元素在交叉轴上的排布。

具体如下:

<div class="flex-parent blue">
  <div class="one green">1</div>
  <div class="two orange">2</div>
</div>

1) flex-grow 的计算

.flex-parent {
  display: flex;
  width: 100px;
  height: 50px;
}
.one {
  flex-grow: 1;
  width: 10px;
}
.two {
  flex-grow: 2;
  width: 20px;
  border: none;
}
  • flex 父容器的排布为 flex-direction: row, 并且其尺寸为 100px
  • 然后有两个子元素:
    • Item #1:
      • 基础尺寸为 10px (e.g. flex-basis: 10px 或者 flex-basis: auto 加上 width: 10px)
      • flex-grow 属性值为 1
    • Item #2:
      • 基础尺寸为 20px
      • flex-grow 属性值为 2

那么,根据算法,计算过程为:

  • 首先,计算该行的空白距离 100px - 10px -20px = 70px
  • 确定每个元素的缩放比率,单元素的缩放比例为其 flex-grow 的值 / 总的 flex-grow 值:
    • Item #1: 1/3
    • Item #2: 2/3
  • 将空白距离按比例分配给各个子元素.
    • Item #1 新的尺寸: 10px + 1/3 * 70px = 33.3333px
    • Item #2 新的尺寸: 20px + 2/3 * 70px = 66.6666px

flex1

2) flex-grow 的计算

.flex-parent {
  display: flex;
  width: 100px;
  height: 50px;
}
.one {
  flex-shrink: 1;
  width: 100px;
}
.two {
  flex-shrink: 2;
  width: 100px;
  border: none;
}
  • flex 父容器的排布为 flex-direction: row, 并且其尺寸为100px
  • 然后有两个子元素:
    • Item #1:
      • 基础尺寸为 100px (e.g. flex-basis: 100px或者 flex-basis: auto 加上 width: 100px)
      • flex-shrink 属性值为 1
    • Item #2:
      • 基础尺寸为 100px
      • flex-shrink 属性值为 2

那么,根据算法,计算过程为:

  • 首先,计算该行的空白距离 100px - 100px -100px = -100px
  • 确定每个元素的缩放比率,单元素的缩放比例为其 flex-shrink 的值 / 总的 flex-shrink 值:
    • Item #1: 1/3
    • Item #2: 2/3
  • 将空白距离按比例分配给各个子元素.
    • Item #1 新的尺寸: 100px - 1/3 * 100px = 66.6666px
    • Item #2 新的尺寸: 100px - 2/3 * 100px = 33.3333px

flex

另外,float、clear 以及 vertical-align 对于 flex 元素没有影响。

参考