How to create a 33% / 33% / 33% / 100% / 100% flexbox layout?

Question

I am trying to create a flexbox layout that resembles this:

I would like to space the first 3 items equally on the first line, with the 2 additional items spanning 100% of the next two respective lines.

Here is the HTML:

<header>
    <nav class="navbar">
        <a href="#" class="navbar-button">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </a>

        <div class="links products">
            <a href="#">AUTOGRAPHS</a>
            <a href="#">CARDS</a>
        </div>

        <div class="title">
            <a href="index.html">YARDSALE SPORTS</a>
        </div>

        <div class="links cart">
            <a href="#">CART (0)</a>
        </div>

        <div class="links navbar-menu">
            <ul>
                <li><a href="#">AUTOGRAPHS</a></li>
                <li><a href="#">CARDS</a></li>
            </ul>
        </div>
    </nav>
</header>

The navbar currently looks like this:

But I would like to make it look like this:

With the hamburger button, the title, and the cart taking up the first line, then autographs / cards taking up an entire line to themselves, respectively

I have already tried:

.navbar:nth-child(-n + 3) {
  width: 33%;
}

and

.navbar:nth-child(n + 4) {
  width: 100%;
}

If you're using flexbox you don't need nth-child. Use "flex-grow" and set the width to 33% for the three cols and 100% for the full width cols: https://stackoverflow.com/questions/24197007/how-can-i-show-three-columns-per-row — Nathaniel Flick, Sep 16 '20 at 22:39
Why not use 3 block divs with the first div a row, space-between flexbox? — ggorlen, Sep 16 '20 at 22:48
When using flexbox, width is dictated by the flex container. If you want to specify a specific width use [flex-basis](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis) with [flex-grow](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow) and [flex-shrink](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink). — ray, Sep 16 '20 at 23:07

dippas · Accepted Answer · 2020-09-16T23:04:41.133

Without touching your current HTML, you can achieve that by using flex-basis: 100% for all items and then just for the first three item using flex-basis: calc(100%3)

.navbar {
  display: flex;
  flex-wrap: wrap;
}

.navbar>* {
  outline: 1px solid red;
  flex-basis: 100%
}

.navbar>*:nth-child(-n+3) {
  flex-basis: calc(100%/3)
}

<header>

  <nav class="navbar">
    <a href="#" class="navbar-button">
      <span class="bar">1item</span>
      <span class="bar"></span>
      <span class="bar"></span>
    </a>
    <div class="links products">
      <a href="#">AUTOGRAPHS</a>
      <a href="#">CARDS</a>
    </div>

    <div class="title">
      <a href="index.html">YARDSALE SPORTS</a>
    </div>

    <div class="links cart">
      <a href="#">CART (0)</a>
    </div>

    <div class="links navbar-menu">
      <ul>
        <li><a href="#">AUTOGRAPHS</a></li>
        <li><a href="#">CARDS</a></li>
      </ul>
    </div>
  </nav>
</header>

I went with this. Thanks! – mikekoscinski Sep 23 '20 at 14:17 — mikekoscinski, Sep 23 '20 at 14:17

How to create a 33% / 33% / 33% / 100% / 100% flexbox layout?

1 Answers1