Flex for Responsiveness

flex-for-responsiveness.markdown

Flex for Responsiveness

A Pen by Chris Jennings on CodePen.

License.

index.html

<h1>Mick Mouse</h1>
<main>
  <div class="info">
    <h2>Where does he work?</h2>
    <p>Works for Walt Disney Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur, similique delectus quam quo illum saepe dolore commodi, impedit ullam vel corporis quos ipsam excepturi odio corrupti voluptas ipsum aut accusantium.</p>
  </div>
  <div class="info">
    <h2>Who does he love?</h2>
    <p>Loves wife Minnie Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita dolorem aliquid nam, natus laudantium impedit minus?</p>
  </div>
  <div class="info">
    <h2>What does he hate?</h2>
    <p>Hates cats this is a lot longer Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed distinctio vero architecto modi quasi. Omnis sint modi dolore. Perferendis et dolorem dolore beatae dolores illum doloremque iste ad voluptatem eveniet?</p>
  </div>
  <div class="info">
    <h2>What does he Like?</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nostrum, dicta voluptates praesentium obcaecati eaque pariatur facere, eos facilis iusto labore placeat laboriosam, vero optio atque blanditiis quae sapiente! Itaque laboriosam labore sunt ut harum quaerat qui soluta architecto, magnam ullam.
    </p>
  </div>
</main>

style.css

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: verdana;
}

h1 {
  text-align: center;
}

h2 {
  margin: 0;
  background: gray;
  color: white;
  padding: 5px;
}

p {
  margin: 2px 5px;
}

main {
  font-size: 80%;
  border: 1px solid green;
  padding: 12px;
  width: 75%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
}

.info {
  border: 2px solid silver;
  margin: 12px;
  flex-basis: 280px;
}

@media screen and (max-width: 500px) {
  main {
    width: 100%;
  }
  .info {
    flex-basis: 100%;
  }
}