Using Flexbox To Make Boxes Side By Side CSS

I'm trying to make it so that the explanation and participation class are flexboxes, but side by side to each other. While below them benefits and requirements would be stacked on

Solution 1:

You can use a wrapping flexbox and use flex-basis to adjust the layout - see demo below:

main{
   display: flex; 
   flex-wrap: wrap; /* wrapping flexbox */
   /* flex-direction is row by default - so not specified */
}

.explanation, .participation{
   flex-basis: 50%; /* occupy half a row (flex line) */
}

.benefits, .requirements{
   flex-basis: 100%; /* occupy the whole row (flex line) */
}

main > section { /* styling for illustration */
  border: 1px solid;
  box-sizing: border-box;
}

<main class="main" id="zen-supporting" role="main">
  <section class="explanation" id="zen-explanation" role="article">
    <h3>What's This About?</h3>
    <p>There</p>
  </section>

  <section class="participation" id="zen-participation" role="article">
    <h3>Participation</h3>
    <p>Download</p>
  </section>

  <section class="benefits" id="zen-benefits" role="article">
    <h3>Benefits</h3>
    <p>Why participate?</p>
  </section>

  <section class="requirements" id="zen-requirements" role="article">
    <h3>Requirements</h3>
    <p>gtgtgtg</p>
  </section>
</main>

Solution 2:

flex-direction is applied from the flex parent and can be one or the other to lay the children (side by side or from top to bottom). Children alignement can be done individually, but it is not about direction. (see links below the snippet to learn more about flex)

You can allow element to wrap and can also set a width or a flex-basis to any of them .

From your code, it can simply be done from flex-wrap:wrap and flex-basis/* or width */ : 100%;.

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

.benefits,
.requirements {
  flex-basis: 100%;
}

section {
  /* to spray them evenly on a row instead sizing */
  flex: 1;
}


/* demo purpose from here */

section {
  margin: 2px;
  border: solid;
}

<main class="main" id="zen-supporting" role="main">
  <section class="explanation" id="zen-explanation" role="article">
    <h3>What's This About?</h3>
    <p>There</p>
  </section>

  <section class="participation" id="zen-participation" role="article">
    <h3>Participation</h3>
    <p>Download</p>
  </section>

  <section class="benefits" id="zen-benefits" role="article">
    <h3>Benefits</h3>
    <p>Why participate?</p>
  </section>

  <section class="requirements" id="zen-requirements" role="article">
    <h3>Requirements</h3>
    <p>gtgtgtg</p>
  </section>
  <!-- demo purpose -->
  <section>demo purpose</section>
  <section>demo purpose</section>
  <section>demo purpose</section>

usefull/ resource links : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Solution 3:

You have to activate the wrap then simply adjust the width of your elements:

.main {
  display: flex;
  flex-wrap: wrap;
}
.main > section {
  width:50%; /*half the width by default to all section*/
  text-align:center;
  border:1px solid;
}

section.benefits,
section.requirements {
  width:100%; /*full width so they stack above each other*/
}

* {
  box-sizing:border-box;
}

<main class="main" id="zen-supporting" role="main">
  <section class="explanation" id="zen-explanation" role="article">
    <h3>What's This About?</h3>
    <p>There</p>
  </section>

  <section class="participation" id="zen-participation" role="article">
    <h3>Participation</h3>
    <p>Download</p>
  </section>

  <section class="benefits" id="zen-benefits" role="article">
    <h3>Benefits</h3>
    <p>Why participate?</p>
  </section>

  <section class="requirements" id="zen-requirements" role="article">
    <h3>Requirements</h3>
    <p>gtgtgtg</p>
  </section>

And with some spacing:

.main {
  display: flex;
  flex-wrap: wrap;
}
.main > section {
  flex-basis:40%;
  flex-grow:1;
  text-align:center;
  border:1px solid;
  margin:10px;
}

section.benefits,
section.requirements {
  flex-basis:90%; /*full width so they stack above each other*/
}

* {
  box-sizing:border-box;
}

<main class="main" id="zen-supporting" role="main">
  <section class="explanation" id="zen-explanation" role="article">
    <h3>What's This About?</h3>
    <p>There</p>
  </section>

  <section class="participation" id="zen-participation" role="article">
    <h3>Participation</h3>
    <p>Download</p>
  </section>

  <section class="benefits" id="zen-benefits" role="article">
    <h3>Benefits</h3>
    <p>Why participate?</p>
  </section>

  <section class="requirements" id="zen-requirements" role="article">
    <h3>Requirements</h3>
    <p>gtgtgtg</p>
  </section>

Related: How to add 1px margin to a flex item that is flex: 0 0 25%?