0

I'm creating a header, and I want the central logo to orient all of the other elements to the left and right of it. And I want the central logo to remain in the exact center of the header the entire time.

The problem comes when some of the elements in the header are not as wide as other elements, so I can't use justify-content: center because that aligns all the elements in exactly the center of the header, but the central header gets pushed too far either left or right.

What I want is demonstrated in my beautiful MS painting below. Note how the space between the darker blue elements from the red div's borders are on the same to the left or right.

enter image description here

j08691
  • 204,283
  • 31
  • 260
  • 272
ThirdGhostHand
  • 377
  • 5
  • 19
  • How about "you can't" ? You must rely on JS. This is against any css rules – Thanh Trung Nov 01 '19 at 18:43
  • Yeah..... I figured this might be the case unfortunately. (This is why we need a justify-self!! https://stackoverflow.com/questions/32551291/in-css-flexbox-why-are-there-no-justify-items-and-justify-self-properties) – ThirdGhostHand Nov 01 '19 at 18:46
  • if you paste in your html we can help you write some JS to make this work...if you need the help – idontwantnoscrubs Nov 01 '19 at 18:57
  • Ehhhh. I'm not going to lose sleep if I find a compromise. If I end up really wanting this effect, I'll have a go at it myself first. But thanks anyway! You guys are awesome. – ThirdGhostHand Nov 01 '19 at 19:04
  • You must cheat the CSS, by making the center absolute position 50%, and cheat the flexbox by making a hole/space in the middle using margins. Post your HTML and we'd eventually help – Thanh Trung Nov 01 '19 at 19:05
  • Oh hey! That's an idea! I was half way there myself by sticking the central logo in the middle with absolute positioning, but the hole in the center had not donned on me. That's still more work than what I was hoping for, but now I at least know what my options are. I should be good. So thank you! – ThirdGhostHand Nov 01 '19 at 19:07
  • Flexbox works perfect for this, check out my answer - don't need JS... – MrRobboto Nov 01 '19 at 19:16
  • The key is to use `justify-content: flex-end;` on the left container to make items come out from the right – MrRobboto Nov 01 '19 at 19:17

2 Answers2

2

I am not sure why anyone would jump to thinking this is impossible - Flexbox is great for this type of stuff. Let me know if this is what you're going for...

To explain - I created three containers within a Flexbox row with items aligned in the middle. The middle container has flex turned off so it sits at it's proper width right in the middle. The left and right containers are flexible and grow to fill the rest of the space creating symmetry. Then you can just align the items within the left container to the right.

.f-row {
  display: flex;
  flex: 1 1 0;
  border: 1px black solid;
}

.f-row.no-flex {
  flex: none;
}

.f-row.center {
  align-items: center;
}

.f-row.right {
  justify-content: flex-end;
}

.box {
  height: 25px;
  width: 50px;
}

.blue {
  background: blue;
}
.red {
  background: red;
}
.yellow {
  background: yellow;
}
.pink {
  background: pink;
}
.purple {
  background: purple;
}
<div class="f-row center">
  <div class="f-row right">
    <div class="box blue"></div>
    <div class="box red"></div>
    <div class="box yellow"></div>
  </div>
  <div class="f-row no-flex">
    <h1>LOGO</h1>
  </div>
  <div class="f-row">
    <div class="box pink"></div>
    <div class="box purple"></div>
  </div>
</div>
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
MrRobboto
  • 722
  • 3
  • 10
1

I hope this is the answer you are looking for:

  1. Create 3 divs, 1 for the logo (we'll name it "logo container") and the other two to contain all the extra elements (we'll name them "special divs");
  2. Use display: flex, align-items: center and justify-content: center to align everything inside the header;
  3. Then, use the same attributes again to align the extra elements inside the two special divs;
  4. Set the width of the logo container to whichever value you wish, just make sure to use min-width;
  5. Set the width of the special containers to width: calc(100vw - ???px);, where ??? is the width of the logo container;
  6. Place how many extra elements you want in the special containers.

Example here: https://codepen.io/maxym11/pen/PooEzXv

MaxxyM11
  • 36
  • 3