使每个 div 填充屏幕宽度的 1/6 [关闭]

Question

我正在尝试将 6 个 div 元素并排排列在页面上。但是我的代码只将它们对齐到左边。我该如何解决这个问题？

这是我的代码：

.flex-parent {
  display: flex;
}

.flex-child {
  flex: 1;
}

<div class='parent flex-parent'>

  <div class='div1 flex-child'></div>
  <div class='div2 flex-child'></div>
  <div class='div3 flex-child'></div>
  <div class='div4 flex-child'></div>
  <div class='div5 flex-child'></div>
  <div class='div6 flex-child'></div>

</div>

Answer 1

将 flex-grow 设置为 1，将 flex-shrink 设置为 0，将 flex-basic 设置为 0px，这样您的所有空间都可用，并且每个子元素将占用相同的空间，因此您的所有六个子元素都将拥有相同的空间

.flex-child {
  flex: 1 0 0px;
}

.flex-parent {
  display: flex;
}

.flex-child {
  flex: 1 0 0px;
  background: red;
  border: 1px solid black;
  height: 20px;
}

<div class='parent flex-parent'>

  <div class='div1 flex-child'>
  </div>

  <div class='div2 flex-child'>
  </div>

  <div class='div3 flex-child'>
  </div>

  <div class='div4 flex-child'>
  </div>

  <div class='div5 flex-child'>
  </div>

  <div class='div6 flex-child'>
  </div>

</div>