何时需要 flex-basis: 100% ？

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

This topic created in 3740 days ago, the information mentioned may be changed or developed.

下面例子中，同样一个四点骰子
为什么.first-face必须有flex-basis: 100%;？

[codepen 地址]

.first-face {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

.first-face .column {
  display: flex;
  justify-content: space-between;
  flex-basis: 100%;  /* 这里为什么必须 flex-basis: 100% ？上面不是已经 jusitify-content: space-between 了么？
  去掉 flex-basis: 100%以后，为什么❶和❷没有 space-between 分开？ */
}

.second-face {
  display: flex;
  justify-content: space-between;
}

.second-face .column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

3 replies • 2016-03-14 22:24:04 +08:00

mz09

Mar 14, 2016

首先一个骰子的模型不推荐用 wrap 的形式写。

```align-content``` 控制的是多行间的位置，你的第一行和第二行就形成了顶住头部和底部的样子。
```flex-basis``` 控制的是行的自身宽度展开，所以 100%就是父元素的宽度 100%，如果你写成 ```width: 100%;``` 或者是 ```flex: 1 1 auto;```都会有同样的效果。

xiaody

Mar 14, 2016

楼主的问题可以归结为：为什么.second-face 里的.column 会自动占 100%高度，而.first-face 里的.column 却不会自动占 100%宽度？

我理解是因为 align-items 的缺省值是 stretch （.second-face ），而 flex-grow 缺省值为 0 （.first-face ）。

xiaopenyou

Mar 14, 2016

@xiaody 谢谢前辈！理解了！两个缺省值点出了关键啊！