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;
}

<mainclass="main"id="zen-supporting"role="main"><sectionclass="explanation"id="zen-explanation"role="article"><h3>What's This About?</h3><p>There</p></section><sectionclass="participation"id="zen-participation"role="article"><h3>Participation</h3><p>Download</p></section><sectionclass="benefits"id="zen-benefits"role="article"><h3>Benefits</h3><p>Why participate?</p></section><sectionclass="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;
}

<mainclass="main"id="zen-supporting"role="main"><sectionclass="explanation"id="zen-explanation"role="article"><h3>What's This About?</h3><p>There</p></section><sectionclass="participation"id="zen-participation"role="article"><h3>Participation</h3><p>Download</p></section><sectionclass="benefits"id="zen-benefits"role="article"><h3>Benefits</h3><p>Why participate?</p></section><sectionclass="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;
}

<mainclass="main"id="zen-supporting"role="main"><sectionclass="explanation"id="zen-explanation"role="article"><h3>What's This About?</h3><p>There</p></section><sectionclass="participation"id="zen-participation"role="article"><h3>Participation</h3><p>Download</p></section><sectionclass="benefits"id="zen-benefits"role="article"><h3>Benefits</h3><p>Why participate?</p></section><sectionclass="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;
}

<mainclass="main"id="zen-supporting"role="main"><sectionclass="explanation"id="zen-explanation"role="article"><h3>What's This About?</h3><p>There</p></section><sectionclass="participation"id="zen-participation"role="article"><h3>Participation</h3><p>Download</p></section><sectionclass="benefits"id="zen-benefits"role="article"><h3>Benefits</h3><p>Why participate?</p></section><sectionclass="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%?