html - 父 div 内的 3 个动态 div，大小固定

Question

我在这里遇到了一些麻烦，我试图在固定宽度的父 div 中创建三个宽度不同的 div。无论如何让div根据那里有多少空间来调整自己？基本上所有三个 div 都有不同的大小，需要填充父 div。 div 也需要在同一行。高度不是问题。

像这样:

<div id="parent">
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 1

Flexbox 来拯救!

对于这个例子，我使用了justify-content: space-between，但是有很多不同的选项。

Wonderful overview of flexbox

#parent {
  width: 300px;
  background-color: orange;
  display: flex;
  justify-content: space-between;
}

.grow {
  flex-grow: 1;
  background-color: yellow;
}

<div id="parent">
  <div>One</div>
  <div class="grow">Two</div>
  <div>Three</div>
</div>