弹性处理与刚性尺寸

在进行弹性处理之余，其实有些场景我们更希望元素尺寸固定，不需要进行弹性调整。设置元素尺寸除了width和height以外，flex还提供了一个flex-basis属性。

flex-basis设置的是元素在主轴上的初始尺寸，所谓的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸。

1. 与width/height的区别

首先以width为例进行比较。看下下面的例子。#container {display:flex;}。

<div id="container">  <div>11111</div>
  <div>22222</div>
</div>

(1) 两者都为0

• width: 0 —— 完全没显示

• flex-basis: 0 —— 根据内容撑开宽度

(2) 两者非0

• width: 非0;

• flex-basis: 非0

—— 数值相同时两者等效

—— 同时设置，flex-basis优先级高

(3) flex-basis为auto

flex-basis为auto时，如设置了width则元素尺寸由width决定；没有设置则由内容决定

(4) flex-basis == 主轴上的尺寸 != width

• 将主轴方向改为：上→下

• 此时主轴上的尺寸是元素的height

• flex-basis == height

2. 常用的复合属性 flex

这个属性应该是最容易迷糊的一个，下面揭开它的真面目。

flex = flex-grow + flex-shrink + flex-basis

复合属性，前面说的三个属性的简写。

一些简写

• flex: 1 = flex: 1 1 0%

• flex: 2 = flex: 2 1 0%

• flex: auto = flex: 1 1 auto;

• flex: none = flex: 0 0 auto; // 常用于固定尺寸 不伸缩

flex:1 和 flex:auto 的区别

其实可以归结于flex-basis:0和flex-basis:auto的区别。

flex-basis是指定初始尺寸，当设置为0时（绝对弹性元素），此时相当于告诉flex-grow和flex-shrink在伸缩的时候不需要考虑我的尺寸；相反当设置为auto时（相对弹性元素），此时则需要在伸缩时将元素尺寸纳入考虑。

因此从下图（转自W3C）可以看到绝对弹性元素如果flex-grow值是一样的话，那么他们的尺寸一定是一样的。