Using Flex Box to Make Some Boxes Vertical and Horizontal

Question

What I'm trying to accomplish is having one flex box be used with the intro section of my page. This will stack 3 different boxes on top of each other. Next, I want the next 2 boxes to be side by side while the 2 below are stacked on top of each other. To do this next part, I have to create another flex box with flex-direction: row.

I was able to get the top 3 to stack on top of each other, but I'm not sure on how to use flex to make the layout for the second part since they are al under one section.

enter image description here

.page-wrapper {
  /*display: flex;*/
  /*flex-flow: wrap;*/
  width: 60em;
  border-style: solid;
  border-color: red;
}

.intro {
  display: flex;
  flex-direction: column;
}

header {
  border-style: solid;
  border-color: red;
  margin-bottom: 1em;
}

.summary {
  font-style: italic;
  border-style: solid;
  border-color: red;
  margin: 1em;
  padding: 1em;
  text-align: center;
}

.preamble {
  border-style: solid;
  border-color: red;
  margin: 1em;
  padding: 1em;
}

.main {
  display: flex;
}

.explanation,
.participation {
  flex-direction: row;
}

.benefits,
.requirements {
  flex-direction: column;
}

<body id="css-zen-garden">
  <div class="page-wrapper">

    <section class="intro" id="zen-intro">
      <header role="banner">
        <h1>CSS Zen Garden</h1>
        <h2>The Beauty of <abbr title="Cascading Style Sheets">CSS</abbr> Design</h2>
      </header>

      <aside class="summary" id="zen-summary" role="article">
        <p>A</p>
      </aside>

      <section class="preamble" id="zen-preamble" role="article">
        <h3>The Road to Enlightenment</h3>
        <p>Littering</p>
      </section>
    </section>

    <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>Strong</p>
      </section>

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

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

sounds similar to your old question: https://stackoverflow.com/q/55840007/8620333 — Temani Afif, Apr 25 '19 at 15:33
Yes, they are close but in that question, I was given % and px, but I can only use em — user2434325, Apr 25 '19 at 15:38

Aya Salama · Answer 1 · 2019-04-25T15:45:09.390

.page-wrapper {
    display: flex;
    flex-direction: column;
    width: 60em;
    border-style: solid;
    border-color: red;
}

.intro {
    display: flex;
    flex-direction: column;
}

header {
    border-style: solid;
    border-color: red;
    margin-bottom: 1em;
}

.summary {
    font-style: italic;
    border-style: solid;
    border-color: red;
    margin: 1em;
    padding: 1em;
    text-align: center;
}

.preamble {
    border-style: solid;
    border-color: red;
    margin: 1em;
    padding: 1em;
}

.flex-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.explanation, .participation ,.benefits ,.requirements {
  padding: 20px;
  border: 1px solid #ccc;
  margin: 5px;
}

<div class="page-wrapper">
  <section class="intro" id="zen-intro">
    <header role="banner">
      <h1>CSS Zen Garden</h1>
      <h2>The Beauty of <abbr title="Cascading Style Sheets">CSS</abbr> Design</h2>
    </header>

    <aside class="summary" id="zen-summary" role="article">
      <p>A</p>
    </aside>

    <section class="preamble" id="zen-preamble" role="article">
      <h3>The Road to Enlightenment</h3>
      <p>Littering</p>
    </section>
  </section>

  <main class="main" id="zen-supporting" role="main">
    <section class="flex-row">
      <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>Strong</p>
      </section>
    </section>

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

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

you need to wrap explanation, participation section in another section and set it's flex-direction to row

Working Demo

I can't make changes to the html it is one of the requriments — user2434325, Apr 25 '19 at 15:38

score 0 · Accepted Answer · answered Apr 25 '19 at 16:20

You just have to use flexbox on main (and flex-wrap) and apply appropriate flex values (in place of widths) on the releveant elements

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

.page-wrapper {
  /*display: flex;*/
  /*flex-flow: wrap;*/
  max-width: 60em;
  border-style: solid;
  border-color: red;
}

.intro {
  display: flex;
  flex-direction: column;
}

header {
  border-style: solid;
  border-color: red;
  margin-bottom: 1em;
}

.summary {
  font-style: italic;
  border-style: solid;
  border-color: red;
  margin: 1em;
  padding: 1em;
  text-align: center;
}

.preamble {
  border-style: solid;
  border-color: red;
  margin: 1em;
  padding: 1em;
}

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

.explanation,
.participation {
  flex-direction: row;
  flex: 1 0 calc(50% - 2em);
  border: 1px solid green;
  margin: 1em;
}

.benefits,
.requirements {
  flex-direction: column;
  flex: 1 1 100%;
  margin: 1em;
  border: 1px solid blue;
}

<body id="css-zen-garden">
  <div class="page-wrapper">

    <section class="intro" id="zen-intro">
      <header role="banner">
        <h1>CSS Zen Garden</h1>
        <h2>The Beauty of <abbr title="Cascading Style Sheets">CSS</abbr> Design</h2>
      </header>

      <aside class="summary" id="zen-summary" role="article">
        <p>A</p>
      </aside>

      <section class="preamble" id="zen-preamble" role="article">
        <h3>The Road to Enlightenment</h3>
        <p>Littering</p>
      </section>
    </section>

    <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>Strong</p>
      </section>

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

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

You are a LIVE SAVER! Thank you – user2434325 Apr 25 '19 at 19:01 — user2434325, Apr 25 '19 at 19:01

Using Flex Box to Make Some Boxes Vertical and Horizontal

2 Answers2