在 floated(or inline-block) parent 内水平均匀分布 div

Question

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

问题是我的布局（左侧的徽标[红色]为float:left或display:inline-block，右侧的按钮[黑色]为float:right）需要flex parent div 为 float:left 或 display:inline-block（因此它位于徽标和按钮之间），但浮动或显示 inline-block 会破坏 flex distribution 我已经为孩子们申请了

这是我目前所处位置的 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;
}

在 floated(or inline-block) parent 内水平均匀分布 div

Evenly distribute divs horizontally within floated(or inline-block) parent

html

css

flexbox

justify