Need help understanding flexbox concept

Question

On the Mdn website they have a work through tutorial of Flexbox. The thing I'm really having trouble understanding is how in this example when flex-direction is used on the section element and is set to column , but it looks like its in rows what am i missing.

here is the code the css and the html are on the same page. Thank you in advance

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Flexbox 0 — starting code</title> <style> html { font-family: sans-serif; }

  body {
    margin: 0;
  }

  header {
    background: purple;
    height: 100px;
  }

  h1 {
    text-align: center;
    color: white;
    line-height: 100px;
    margin: 0;
  }

  article {
    padding: 10px;
    margin: 10px;
    background: aqua;
  }

  /* Add your flexbox CSS below here */

section{ display:flex; flex-direction:column;

}

</style>

</head> <body> <header> <h1>Sample flexbox example</h1> </header>

<section>
  <article>
    <h2>First article</h2>

    <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
  </article>

  <article>
    <h2>Second article</h2>

    <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
  </article>

  <article>
    <h2>Third article</h2>

    <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>

    <p>Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit. Intelligentsia umami wayfarers pickled, asymmetrical kombucha letterpress kitsch leggings cold-pressed squid chartreuse put a bird on it. Listicle pickled man bun cornhole heirloom art party.</p>
  </article>
</section>

</body> </html>

Answer 1 · 2020-09-21T20:04:31Z

September 21, 2020 8:04pm

You should remember flexbox is called because it is flexible so. That means flexbox has flex width. So you should remember if you change the direction to column the main axis changes... so in flex direction column is the height flexible not the width anymore. Thats how flexbox works actually.

Answer 2 · 2020-09-21T21:33:04Z

September 21, 2020 9:33pm

This css makes the section a column, not a section containing columns. The articles are stacked vertically to create a column instead of stacked horizontally to create a row.

Unless you are wanting some of the nuances of flex-box, or intend to make use additional flex features, then there is little value in using column to stack blocks of content like this. The default block behaviour will suffice as it will stack vertically too.

Welcome to the Treehouse Community

Looking to learn something new?

Joshua Kohantab

Joshua Kohantab

Need help understanding flexbox concept

2 Answers

Ercan Memis

Ercan Memis

Joshua Kohantab

Joshua Kohantab

Alan Brown

Alan Brown

Joshua Kohantab

Joshua Kohantab