dmoz dmoz - 2 months ago 12
HTML Question

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

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:

the goal

Any ideas?

Answer

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