Large First Item with a Flexbox Layout

First-child full-width in Flexbox

You can set the :first-child to a width of 100%, and the rest of the childs :not(:first-child) to flex: 1.

To put them on multiple lines, use flex-wrap: wrap on the container:

.container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background: #e2eaf4;
  padding: 10px;
}

.child {
  display: inline-block;
  font-family: "Open Sans", Arial;
  font-size: 20px;
  color: #FFF;
  text-align: center;
  background: #3794fe;
  border-radius: 6px;
  padding: 20px;
  margin: 12px;
}

.child:first-child {
  width: 100%;
}

.child:not(:first-child) {
  flex: 1;
}

<div class="container">
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
</div>

Flexbox Layout Pattern: 5 Square (1 Large, 4 small)

Nested flexboxes would work here in combination with media queries.

Codepen Demo with media query

Basically:

* {  box-sizing: border-box;  margin: 0;  padding: 0;}.parent {  width: 100vw;  display: flex;}.col {  flex: 0 0 50vw;  height: 50vw;  background: blue;}.wrap {  display: flex;  flex-wrap: wrap}.box {  flex: 0 0 25vw;  height: 25vw;}.red {  background: red;}.pink {  background: pink;}.orange {  background: orange;}.grey {  background: grey;}

<div class="parent">  <div class="col"></div>  <div class="col wrap">    <div class="box red"></div>    <div class="box pink"></div>    <div class="box orange"></div>    <div class="box grey"></div>  </div></div>

Make first element full width and the rest in one line

This will try to keep all your subordinate items on one row.

See notes in CSS

.flex-container {  display: flex;  flex-flow: row wrap;  justify-content: space-between;}
.flex-container .flex-item {  background-color: #d94a6a;  flex: 1 1 0;                                       /*  for 2nd line to not wrap  */  margin: 0 1px;                                                  overflow: hidden;                                  /*  for 2nd line to not wrap  */  min-height: 75px;  text-align: center;  -webkit-box-shadow: 4px 4px 7px 0px rgba(50, 50, 50, 0.5);  -moz-box-shadow: 4px 4px 7px 0px rgba(50, 50, 50, 0.5);  box-shadow: 4px 4px 7px 0px rgba(50, 50, 50, 0.5);}
.flex-container .flex-item:nth-child(1) {  background-color: #3b5bb2;  flex-basis: 100%;                                  /*  make first take full width  */  min-height: 400px;  margin-bottom: 20px;}

<div class="flex-container">    <div class="flex-item">I'm the biggest!</div>    <div class="flex-item">#2</div>    <div class="flex-item">#3</div>    <div class="flex-item">#4</div>    <div class="flex-item">#5</div>    <div class="flex-item">#6</div>    <div class="flex-item">#7</div></div>

Force flex item to span full row width

When you want a flex item to occupy an entire row, set it to width: 100% or flex-basis: 100%, and enable wrap on the container.

The item now consumes all available space. Siblings are forced on to other rows.

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

#range, #text {
  flex: 1;
}

.error {
  flex: 0 0 100%; /* flex-grow, flex-shrink, flex-basis */
  border: 1px dashed black;
}

<div class="parent">
  <input type="range" id="range">
  <input type="text" id="text">
  <label class="error">Error message (takes full width)</label>
</div>

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

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>

Layout grid items in css

I find CSS Grid to be the most intuitive for this type of x/y directional layout. Using grid-template-areas is a fun way to approach layout since you can essentially create any layout you'd like and then assign classes to the arbitrary names you've used for your grid areas. The dots (.) mean that the grid area is empty.

Although this is totally possible to accomplish using flex, the additional markup needed is undesirable. I would argue that any layout requiring control over both x and y axis is more intuitive and scalable using grid.

.grid {
  display: inline-grid;
  gap: 0.75rem;
  grid-template-areas:
                       ". item2"
                       ". item2"
                       "item1 item2"
                       "item1 item2"
                       "item1 item3"
                       "item1 item3"
                       ". item3"                       
                       ". item3";                       
}

.item {
  background-color: green;
  color: ghostwhite;
  width: 100px;
  height: 100px;
}

.item1 {
  grid-area: item1;
}

.item2 {
  grid-area: item2;
}

.item3 {
  grid-area: item3;
}

<div class="grid">
  <div class="item item1">item 1</div>
  <div class="item item2">item 2</div>
  <div class="item item3">item 3</div>  
</div>