均匀地在浮动（或内联块）父级内分配div

Question

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

问题是我的布局（左侧的徽标[红色]是float:left或display:inline-block以及右侧的按钮[黑色]和float:right）要求flex parent div为float:left或display:inline-block（因此它位于徽标和按钮之间），但浮动或显示内联块会破坏我为孩子们应用的弹性分布。

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

这是我需要的图像：

有什么想法吗？

Answer 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;
}