Using Flexbox To Make Boxes Side By Side CSS

Question

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 top of each other.

I tried to use flex-direction:row; for the explanation and participation section, and then switch to flex-direction: column; for the rest, but that isn't working. I need help trying to figure out this can be done. Also,I can't change my HTML.

.main {
  display: flex;
}

.benefits {
  flex-direction: column;
}

.requirements {
  flex-direction: column;
}

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

could you please respond to the answers below and upvote / accept them if they helped you? Thanks! — kukkuz, May 03 '19 at 02:24

Temani Afif · Answer 1 · 2019-04-25T06:51:08.320

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%?

Thank you! How do you add a space between the boxes? – user2434325 Apr 25 '19 at 01:13 — user2434325, Apr 25 '19 at 01:13

score 0 · Answer 2 · answered Apr 25 '19 at 00:07

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>

Space between border so they aren't touching. SO benefits isn't touching require — user2434325, Apr 25 '19 at 01:37

score 0 · Answer 3 · answered Apr 25 '19 at 00:27

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/

I used the section { margin: 2px; border: solid; } and this addes to my whole page with my other sections. Can it just be used on these sections only — user2434325, Apr 25 '19 at 01:40

Using Flexbox To Make Boxes Side By Side CSS

3 Answers3

Linked