css3 - 何时需要 flex-basis: 100% ？

问题描述

问 题

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

codepen地址

/* 核心代码 */
.first-face {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

.first-face .column {
  display: flex;
  justify-content: space-between;
  flex-basis: 100%;                  /* 为什么必须有这一行？ */
}

.second-face {
  display: flex;
  justify-content: space-between;
  /* 这里为什么不需要flex-basis: 100%; ？*/
}

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

解决方案

摘录友站前辈的解答，既简洁又清晰：

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

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

这篇关于css3 - 何时需要 flex-basis: 100% ？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！