何时需要 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;
}
阅读 5.7k
3 个回答

摘录友站前辈的解答,既简洁又清晰:

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

我理解是因为 align-items 的缺省值是 stretch (.second-face ),而 flex-grow 缺省值为 0 (.first-face )。

因为你的第二个盒子 是 纵向布局 你添加了 flex-direction: column;

而第一个盒子 你又应用了 flex-wrap: wrap; 内容超出后换行 而且用的是 align-content而不是justify-content 内容超出换行后 对齐方式justify-content: space-between不再生效

新手上路,请多包涵

flex-basis: 100%; 这一句是值column元素相对于父元素,占据100%空间也就是水平铺满。
而justify-content是指你子元素的排列方式,二者含义的是不一样的。

因为first-face是水平排列的,如果它的子元素column不设置flex-basis,那么你会看到他并没有占据一整行。
而second-face设置了justify-content为水平等分排列,所以column是水平等分的。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题