在浮动（或内联块）父级中均匀分布 div答案

【问题标题】：Evenly distribute divs horizontally within floated(or inline-block) parent在浮动（或内联块）父级中均匀分布 div
【发布时间】：2017-02-14 10:20:21
【问题描述】：

我正在尝试在其父项中水平分布子项。我知道 text-align:justify 和 flex 方法——我目前正在使用 flex 方法。

问题是我的布局（左侧的徽标[红色] float:left 或 display:inline-block 和右侧的按钮[黑色] float:right）要求 flex 父 div 为 @987654328 @ 或 display:inline-block（使其位于徽标和按钮之间），但浮动或显示 inline-block 会破坏我为孩子们申请的 flex 分布。

这是我目前所处的 CodePen：http://codepen.io/dmoz/pen/QKaQrL

这是我需要的图片：

有什么想法吗？

【问题讨论】：

标签： html css flexbox justify

【解决方案1】：

我更新了你的 CSS。检查小提琴：https://jsfiddle.net/Lq89dwxL/

.header {
  display: flex;
  width: 100%;
  height: 100px;
  background: #f5f5f5;
  margin: 0;
  padding: 0 10px;
  overflow: auto;
}
.logo {
  width: 100px;
  height: 30px;
  margin: 8px 50px 10px 0;
  background: red;
}
button {
  width: 30px;
  height: 30px;
  margin: 8px 0 0 50px;
  border: none;
  background: black;
}
.item_container {
  width:100%;
  display: flex;
  justify-content: space-between;
  padding: 0 55px 0 15px;
}
.item {
  width:25px;
  height: 30px;
  background: blue;
  margin: 8px 5px;
}

【讨论】：

很好奇为什么你开始添加（看似）随机边距，因为它会抛出分布并使项目不均匀。我在这里调整了您的 JSFiddle，以（可能）根据 OP 的要求对其进行整理：jsfiddle.net/Lq89dwxL/1
您可以忽略页边距，这取决于您。问题在于使它们内联，它已经解决了
我不是 OP - 我只是一个路人。我只是觉得奇怪的是你缩小了他的标志并在两边添加了不均匀的填充物。我刚刚修改了您的示例以保持 OP 示例中的大小，并使两侧的边距保持一致。你解决了这个问题，我只是稍微修改了一下。尽管如此，还是做得很好。
@Santi，同意。他有点破坏了我原来的布局/尺寸，但带有边距的布局本质上是完成它所需要的。