Using empty elements in flexbox headers

Question

*edited for being unclear - I'm trying to get the nav element to grow, but not too much, and to have the nav items space evenly.

When I create a header, I often use an empty div in order to help horizontal alignment when resizing, by assigning it a flex-grow weight.

I'm sure this is not the way it should be done, and it's probably just a lack of flexbox knowledge, so I was hoping someone could take a look at my header and recommend the proper way of doing it.

Here's the sort of resizing I want to achieve: https://codepen.io/anon/pen/LmVrvm

Thanks

<div class="container">
  <div class="item logo">LOGO</div>
  <div class="item empty-item"></div>
  <div class="item nav">
    <div class="item item1">MENU ITEM 1</div>
    <div class=" item item2">MENU ITEM 2</div>
    <div class="item item3">MENU ITEM 3</div>
  </div>
</div>

-

.container{
  display: flex;
  width: 100%;
  height: 70px;
  background: #5e5e5e;

  align-items: center;
}

.logo{
  width: 200px;
  text-align: center;
}

.empty-item{
  flex-grow: 2;
}

.nav{
  flex-grow: 1;

  display: flex;
  justify-content: space-between;
}

.item{
  margin: 5px;
  padding: 5px;
  border: 1px solid #fff;
}

It's really unclear what the *actual* purpose of the empty element is. What does it do that the usual flexbox alignment and margins does not? — Paulie_D, Apr 20 '18 at 18:58
Are you trying to do this? - https://codepen.io/Paulie-D/pen/vjOaqN — Paulie_D, Apr 20 '18 at 19:01
no, sorry for being unclear paulie - I'm trying get the navigation items to space out evenly within the nav element, whilst also getting the nav element to grow, but not too much. so i've put an empty element in to grow and take some of the space. hope that made a bit more sense — NickW, Apr 20 '18 at 19:15
This post may be helpful to you. It covers various ways of spacing flex items (so you don't have to use an empty div): https://stackoverflow.com/q/32551291/3597276 — Michael Benjamin, Apr 23 '18 at 00:59

score 2 · Accepted Answer · answered Apr 20 '18 at 19:27

You don't need that empty div to make the nav responsive.

One of the ways you can use is flex-basis: num% and add justify-content: space-between to the parent container.

check my code:

.container {
  display: flex;
  width: 100%;
  height: 70px;
  background: #5e5e5e;
  justify-content: space-between;
  align-items: center;
}

.logo {
  width: 200px;
  text-align: center;
}

.empty-item {}

.nav {
  display: flex;
  justify-content: space-between;
  flex-basis: 45%;
}

.item {
  margin: 5px;
  padding: 5px;
  border: 1px solid #fff;
}

<div class="container">
  <div class="item logo">LOGO</div>
  <div class="item nav">
    <div class="item item1">MENU ITEM 1</div>
    <div class=" item item2">MENU ITEM 2</div>
    <div class="item item3">MENU ITEM 3</div>
  </div>
</div>

You will probably need to use prefixes for browsers support something like `-ms-flex-preferred-size: num%`. FYI — Adam, Apr 20 '18 at 19:40

score 0 · Answer 2 · answered Apr 20 '18 at 19:05

0

I updated your codepen here: https://codepen.io/platypusjones/pen/xjGJoe

I removed the extraneous elements, but the important thing here is removing flex-grow and adding margin-left and displaying it inline-block instead which will allow it to float right naturally.

.nav{
  display: flex;
  justify-content: space-between;
  margin-left:auto;
  display: inline-block;
}

answered Apr 20 '18 at 19:05

pj100

402
3
13

sorry pj100, i didn't realise how unclear my question was initially. if you look at the difference in how my code pen resizes (the navigation items specifically) vs yours, it might help show what i'm trying to achieve. I want the nav element to grow, and the nav items to take up an even amount of space within the element. that's why i've put an empty div in between the logo and the nav element – NickW Apr 20 '18 at 19:18

Using empty elements in flexbox headers

2 Answers2