Flexbox div不占用整个宽度

Question

我试图了解display:flex的工作原理，但每当我设定时，孩子都不会占据整个宽度。我期待三个div获得33％的屏幕宽度。我做错了什么？

＆＃13;

＆＃13;

.flexbox {
  display: flex;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要告诉flex项目展开。默认情况下，它们不占用可用空间。

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>

Answer 2

你走了：

DB

为了使子元素增长，您需要添加一个flex属性。这是一篇关于flexbox的精彩文章：https://css-tricks.com/snippets/css/a-guide-to-flexbox/