Flexbox. Putting one object from row in center (without knowing the size of other objects)

Question

I work on the header for a website and I have a problem with a flexbox. I want to put the logo (item2) in the perfect center no matter what items will be in item 1 or 3. The item1 I want to be always to be on the left and object 3 always to be on the right. Also if considered the object in the second box is an SVG graphic.

CSS:

header {
    display: flex;
    justify-content: space-between
}
.item {

}
.item2 {

}
.item3 {

}

HTML:

<header>
    <div class="item">
        Menu1 Menu2 Menu3 Menu4
    </div>

    <div class="item2">
        logo
    </div>

    <div class="item3">
        PL/ENG
    </div>
</header>

It would be really nice if someone could help me solve this thing.

Edit: I changed code a bit to properly represent what I'm struggling with.

Can you elaborate little bit more ?? because you have already given a height and width to `.items` class — LKG, Jun 09 '17 at 11:58
The idea of using flexbox is especially to "flex" the things and not caring about sizes. The `justify-content` should be enough… can you be more precise about what you want? — Pierre Le Bot, Jun 09 '17 at 12:00
Please review and comment on my answer, and let me know if something is unclear or missing. If not, then it would be great if you could accept the answer that helped you the most. — Asons, Jun 18 '17 at 14:19

Asons · Accepted Answer · 2017-06-09T13:57:05.587

This can be done in more than one way, and by adding a background color, you'll see how they behave somewhat different.

You can give the outer most items flex: 1 (and I also removed justify-content: space-between)

header {
    display: flex;
}
.item {
  flex: 1;
}
.item2 {

}
.item3 {
  flex: 1;
  text-align: right;
}
header > div {
  background: lightgray;
  border: 2px dotted red;
}
header > .item2 {
  background: lightblue;
}

<header>
    <div class="item">
        Menu1 Menu2 Menu3 Menu4
    </div>

    <div class="item2">
        logo
    </div>

    <div class="item3">
        PL/ENG
    </div>
</header>

Another option is to use absolute positioning for the middle item,

header {
  position: relative;
  display: flex;
}
.item {
  flex: 1;
}
.item2 {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}
.item3 {
  flex: 1;
  text-align: right;
}
header > div {
  background: lightgray;
  border: 2px dotted red;
}
header > .item2 {
  background: lightblue;
}

<header>
    <div class="item">
        Menu1 Menu2 Menu3 Menu4
    </div>

    <div class="item2">
        logo
    </div>

    <div class="item3">
        PL/ENG
    </div>
</header>

here combined with auto margin.

header {
  position: relative;
  display: flex;
}
.item {
  margin-right: auto;
}
.item2 {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}
.item3 {
  margin-left: auto;
}
header > div {
  background: lightgray;
  border: 2px dotted red;
}
header > .item2 {
  background: lightblue;
}

<header>
    <div class="item">
        Menu1 Menu2 Menu3 Menu4
    </div>

    <div class="item2">
        logo
    </div>

    <div class="item3">
        PL/ENG
    </div>
</header>

Flexbox. Putting one object from row in center (without knowing the size of other objects)

1 Answers1