Flexbox div 不占用整个宽度

Question

我试图了解它是如何display:flex工作的，但是每当我设置它时，孩子们都不会占据整个宽度。我期待三个 div 获得屏幕宽度的 33%。我究竟做错了什么？

.flexbox {
  display: flex;
}

.flexbox div {
  border: 1px solid black;
  padding: 10px;
}

<div class="flexbox">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

Answer 1

您需要告诉弹性项目展开。默认情况下，它们不消耗可用空间。

的初始设置flex-basis是auto，这意味着项目采用其内容的大小。

的初始设置flex-grow是0，这意味着项目不会跨越可用空间增长。

添加flex: 1到您的项目，相当于：flex: 1 1 0，这是以下的简写：

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 0.

.flexbox {
  display: flex;
}

.flexbox div {
  flex: 1;  /* new */
  border: 1px solid black;
  padding: 10px;
}

<div class="flexbox">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>