CSS Flexbox的具体用法详解(3)

先将所有项目 按照 flex-shrink * item-size 的方式加起来 得到一个加权和，然后计算出 每一份 item 的 shrink比例: shrink比例 = flex-shrink * item-size / 之前的总和。最后每一个item 减去这个 shrink比例 * 负可用空间。

在flex项目有min-width(height)和max-width(height)时，对应的项目要考虑上下限值，把剩余的伸缩值分配给其他项目。

3. flex-basis

flex-basis指定了 flex 元素在主轴方向上的初始大小，即决定了 flex项目内容的宽或者高（取决于主轴的方向）的尺寸大小。

默认情况，Flex项目的初始宽度由flex-basis的默认值决定，即：flex-basis: auto。Flex项目宽度的计算是基于内容的多少来自动计算。

flex-basis和width/height有一定的优先级，具体规则如下：

flex-basis 的优先级比 width/height 非auto高

width/height auto优先级等于 flex-basis，取两者中的最大值。

4. align-self

align-self 控制单个项目沿着Cross-Axis的对其方式。

除了auto之外，上述示例中flex容器设置了align-itmes：center。

auto 是将目标flex项目的值设置为父元素的 align-items值，或者如果该元素没有父元素的话，就设置为 stretch。上述示例中align-items：stretch。

四、总结

以上是对flexbox的整体介绍，可以看出其强大与灵活。除此之外，flexbox还有很多其他的特性以及问题，这里就不再介绍。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

（编辑：ASP站长网）