html - 在 float (或内联 block )父级内水平均匀分布 div

Question

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

问题是我的布局(左边的 Logo [red]是float:left或display:inline-block，还有一个按钮[black]是right 和 float:right) 要求 flex parent div 为 float:left 或 display:inline-block(以便它位于 Logo 和按钮)，但 float 或显示内联 block 会破坏我为 children 申请的 flex 分布。

这是我目前所在位置的 CodePen:http://codepen.io/dmoz/pen/QKaQrL

这是我需要的图片:

有什么想法吗？

Answer 1

我更新了你的 CSS。检查 fiddle :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;
}