flex-item的flex-basis与width属性有什么关系？

我们知道，给一个元素A设置display: flex; ，那么A就是flex container，此时如果A元素有三个子元素A-1,A-2,A-3，那么这三个子元素便是A的flex item，我们可以给flex item设置flex-basis。这个flex-basis是干嘛的呢？先贴一段官方的巴拉巴拉：

This component sets the flex-basis longhand and specifies the flex basis: the initial main size of the flex item, before free space is distributed according to the flex factors. It accepts the same values as the width and height properties (except that auto is treated differently) plus the content keyword

大体意思就是，flex-basis指定了flex-item在主轴方向上的的初始大小，这个属性接受同widh或者height一样的值，顺便w3c还给新增了一个值content。

flex-basis的值auto的计算规则是，它会先检索一下你是否设置了width（或者height值，取决于flex-direction），如果设置了明确的非auto的width值（或者height值），那么它就会用这个值，否则的话最后使用的值是content。在这里，如果你设置flex-basis的值非auto、content，而是其它一个符合width（或者height）属性规则的值，那么对于计算这个值的规则和css2中块级元素的计算规则是一样样的。

那么，flex-basis和width（或者height）的关系，目前（说不定啥时候就又变了呢，呵呵呵）只是当flex-basis设置为auto且width（或者height）不为auto时，计算flex-basis的used size时会用到width（或者height）的值。

那么，来验证一下：

下图，中间“电影”元素，flex:1;（对应flex-basis的值为0） width在一直变化，但是并没有影响“电影”的大小

/分割线/

下图，中间“电影”元素，flex-basis:auto; width在一直变化，“电影”的大小也一直在变化

呵呵呵，看美队3去。

同时放在了在github上的something of css，这里会长期写一些关于css的文章