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

Question

下面例子中，同样一个四点骰子
为什么.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;
}

Answer 1

Excerpt from the answer given by a senior friend of the site, which is both concise and clear:

The original poster’s question can be summarized as: Why does the .column in the .second-face automatically occupy 100% of the height, but the .column in the .first-face does not automatically occupy 100% of the width?

I understand because the default value of align-items is stretch (.second-face), while the default value of flex-grow is 0 (.first-face).

Answer 2

Because your second box is in portrait layout you added flex-direction: column;

And for the first box, you applied flex-wrap: wrap; and the line breaks after the content exceeds the limit. And you used align-content instead of justify-content. After the content exceeds the line break, the alignment justify-content: space-between no longer takes effect