在浮动（或行内块）父级内均匀分配div(Evenly distribute divs horizontally within floated(or inline

在浮动（或行内块）父级内均匀分配div(Evenly distribute divs horizontally within floated(or inline-block) parent)

我试图平均分配他们的父母中的子项目。 我知道text-align:justify和flex方法 - 我目前使用flex方法。

问题是，我的布局（左边的float:left标识[红色] float:left或display:inline-block ，右边的按钮[black]和float:right ）需要flex父div为float:left或display:inline-block （以便它位于徽标和按钮之间），但浮动或显示内嵌块会打破我为孩子们应用的柔性分布。

这里是我到目前为止的CodePen： http ://codepen.io/dmoz/pen/QKaQrL

这是我需要的图像：

有任何想法吗？

I'm trying to horizontally distribute child items evenly within their parent. I'm aware of the text-align:justify and flex methods—I'm currently using the flex method.

The problem is that my layout(a logo[red] to the left that's float:left or display:inline-block and a button[black] that's to the right and float:right) requires that the flex parent div be float:left or display:inline-block(so that it sits between the logo and the button), but floating or displaying inline-block breaks the flex distribution I have applied for the kids.

Here's a CodePen of where I'm at so far: http://codepen.io/dmoz/pen/QKaQrL

This is an image of what I need:

Any ideas?

最满意答案

我更新了你的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; }

I updated your CSS. Check the 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; }