html - 如何在不使用百分比的情况下自动添加 div 之间的间距？

Question

我有几个水平对齐的 div。如何自动设置它们之间的间距，以便在调整屏幕大小或添加另一个 div 时，div 之间的间距相等。

屏幕宽度为 600px 时的示例:

屏幕宽度为 330px 时的示例:

希望我的解释足够好。

感谢您的帮助!

Answer 1

Flexbox 可以做到这一点 https://jsfiddle.net/2Lzo9vfc/210/

HTML

<div class="content">
  <div class="box">Box</div>
  <div class="box">Box</div>
  <div class="box">Box</div>
</div>

CSS

.content {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around; 
    justify-content: space-around;
    width: 100%;
}

.box {
    background: black;
    padding: 25px;
    color: white;
}