下面例子中,同样一个四点骰子
为什么.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;
}
摘录友站前辈的解答,既简洁又清晰:
因为你的第二个盒子 是 纵向布局 你添加了
flex-direction: column;
而第一个盒子 你又应用了
flex-wrap: wrap;
内容超出后换行 而且用的是align-content
而不是justify-content
内容超出换行后 对齐方式justify-content: space-between
不再生效