Responsive divs/sections using flex-box

Create a simple responsive page with a lot of nested sections

by vikikamath

HTML

<main>
  <header>
    <nav>
      <ul class="nav">
        <li class="red"><a href="#red">Red Nav</a></li>
        <li class="blue"><a href="#blue">Blue Nav</a></li>
        <li class="green"><a href="#green">Green Nav</a></li>
        <li class="brown"><a href="#brown">Brown Nav</a></li>
      </ul>
    </nav>
  </header>

  <section class="container">
    <section>
      <h2>
    Summary
  </h2>
      <div class="row">
        <ul class="title">
          <li class="red">Engineer</li>
          <li class="blue">Front End</li>
          <li class="green">Web</li>
        </ul>
      </div>
      <div class="row">
        <ul class="title">
          <li class="red">Gitub</li>
          <li class="blue">Stack Overflow</li>
          <li class="green">Linekd</li>
        </ul>
      </div>
      <div class="description row">
        It's becoming more and more common for potential employers to simply request a link to your website, rather than a sheet of paper. And an online resume is a good professional compliment to your PDF resume—the two work together.
      </div>
    </section>
    <section class="skills">
      <h2>
    Skills
  </h2>
      <div class="row">
        <ul class="flex">
          <li class="block">
            <h3>
              Functional Reactive Programming
            </h3>
            <div class="description row">
              It's becoming more and more common for potential employers to simply request a link to your website, rather than a sheet of paper. And an online resume is a good professional compliment to your PDF resume—the two work together.
            </div>
          </li>
          <li class="block">
            <h3>
              Functional Reactive Programming
            </h3>
            <div class="description row">
              It's becoming more and more common for potential employers to simply request a link to your website, rather than a sheet of paper. And an online resume is a good professional compliment to your...

CSS

main {
  max-width: 960px;
  margin: 0 auto;
  background: #ffe;
}


/* responsive flex stuff */

.nav {
  /* flex-container */
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.container {
  display: flex;
  flex-direction: column;
  color: #000;
}

.title {
  /* flex-container */
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.skills .flex {
  /* flex-container */
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}

.skills .flex li {
  flex-basis: 33%;
}

.row {
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}

.block {
  margin: 0.8em;
  border: #ccc solid 1px;
  border-radius: 2%;
}

@media all and (max-width: 480px) {
  .nav {
    flex-direction: column;
  }
  .description {
    display: none;
  }
}


/* --- */


/* decoration stuff */

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

.brown {
  background-color: brown;
}

.black {
  background-color: black;
}

.skills {
  background: #ffa;
}


/* --- */


/* defaults - maybe set by reset.css */

body {
  color: #fff;
  box-sizing: border-box;
  text-align: center;
}

a {
  text-decoration: none;
  color: #fff;
}

ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

li {
  padding: 0px;
  margin: 0px;
}


/* --- */