Using Flexbox

by Konstantin Rouda

HTML

<nav class="navbar">
  <ul class="navbar__menu">
    <li class="navbar__menu__item"><a href="#">Home</a></li>
    <li class="navbar__menu__item"><a href="#">Chips</a></li>
    <li class="navbar__menu__item"><a href="#">Spaghetti</a></li>
    <li class="navbar__menu__item"><a href="#">Meat</a></li>
  </ul>
</nav>


<!--Column Layout and Individual Ordering-->
<!--<section class="media-object">
  <h2 class="media-object__title">Try our delicious meat.</h2>
  <img src="https://s9.postimg.org/anbcxiy8v/abstract_1239434_640.jpg" class="media-object__image" alt="image of the meat" />
  <div class="media-object__body">
    <p class="media-object__text">
      Filet mignon corned beef drumstick picanha strip steak pork belly tongue. Flank strip steak shankle pastrami chuck. Brisket bresaola ribeye boudin, ham ball tip frankfurter filet mignon jowl salami kielbasa landjaeger shank picanha shoulder. Sirloin boudin burgdoggen short ribs, picanha brisket alcatra chicken pork prosciutto tongue shankle.
    </p>
    <a class="media-object__link" href="#">Read the whole story</a>
  </div>
</section>-->


<!--Nested Flexbox Layouts-->
<section class="media-container">
  <article class="media-object">
    <h2 class="media-object__title">Try our delicious meat.</h2>
    <img src="https://s9.postimg.org/anbcxiy8v/abstract_1239434_640.jpg" class="media-object__image" alt="image of the meat">
    <div class="media-object__body">
      <p class="media-object__text">
        Filet mignon corned beef drumstick picanha strip steak pork belly tongue. Flank strip steak shankle pastrami chuck. Brisket bresaola ribeye boudin, ham ball tip frankfurter filet mignon jowl salami kielbasa landjaeger shank picanha shoulder. Sirloin boudin burgdoggen short ribs, picanha brisket alcatra chicken pork prosciutto tongue shankle.
      </p>
      <a class="media-object__link" href="#">Read the whole story</a>
    </div>
  </article>
  
  <article class="media-object">
    <h2...

CSS

HTML {
  line-height: 1.5;
  box-sizing: border-box;
}

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

BODY {
  font-family: 'Source Sans Pro', sans-serif;
  padding: 0; margin: 0;
}

.navbar__menu {
  display: flex;
  list-style: none;
  padding: 0;
  margin-top: 0;
  background-color: #486a8e;
}

.navbar__menu__item {
  display: inline-block;
  /*width: 25%;*/
  background-color: #12459e;
  outline: 1px solid #fff;
  text-align: center;
  text-transform: uppercase;
  transition: background-color .5s linear;
}

.navbar__menu__item:hover {
  background-color: #306dd8;
}

.navbar__menu__item A {
  display: block;
  padding: 1em;
  color: #fff;
  text-decoration: none;
}

/*Column Layout and Individual Ordering*/

IMG {
  max-width: 100%;
}
/*
.media-object {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  max-width: 20em;
  margin: 2em auto 0;
  padding: 1em;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
}*/

.media-object__image {
  order: -1; /*here we're changing the order of the image to appear before the title (the default value for order property is 0) because perhaps design will benefit from this, but the actual order stay untouched so screen readers will see the title first and then the image*/
}
/*
.media-object__title {
  margin-bottom: .1em;
}

.media-object__link {
  text-decoration: none;
  display: block;
  padding: .5em .3em;
  background: #0bf;
  color: #fff;
  text-align: center;
  border-radius: .2em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
*/

/*Nested Flexbox Layouts*/

.media-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  max-width: 70vw;
  margin: 1em auto 0;
  padding: .2em;
}

.media-object {
  max-width: 20em;
  padding: 1em;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
}

.media-object__image {
  order: -1;
}

.media-object__title {
  margin-bottom: .1em;
}

.media-object__body {
  display: flex;
  flex-direction: column;
  min-height: 350px;
}

.media-object__link {
  text-decoration:...