html - 自动将相邻的 div 居中

Question

我有以下 HTML 片段:

<div id="main">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>

演示: https://jsfiddle.net/1osmm3r3/

问题是，我在主 div 上有 width: 80%，在中间 div 上有特定的 px。怎样才能让中间的div保持在主div的中心，左右div自动占满剩下的空间？在中间的 div 上使用 margin-left 和 margin-right 设置为 auto 似乎根本不会移动它，我需要把它放在一起数。

这就是我想要的样子:

Answer 1

使用 display: flex 的解决方案。阅读更多有关 flexbox 的信息 here .

#main {
  display: flex;
  flex-direction: row;
}
#main #left {
  flex: 1;
  background-color: coral;
}
#main #middle {
  flex: 1;
  background-color: forestgreen;
}
#main #right {
  flex: 1;
  background-color: cornflowerblue;
}

<div id="main">
  <div id="left">Left</div>
  <div id="middle">middle</div>
  <div id="right">right</div>
</div>