<main>
  <h1>Responsive Boxes
    <span>With Flex Box</span></h1>
  <ul class="boxes">
    <li>
      <a href="#">
        <h2>Some logo</h2>
        <p>And a Name</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Some Other logo</h2>
        <p>And another Name</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Some logo</h2>
        <p>And a Name that is quite a bit longer than the other one before it.</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Some logo</h2>
        <p>And a Name</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Some logo that is a bit Bigger!</h2>
        <p>And a Name</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Some logo</h2>
        <p>And a Name</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Some logo</h2>
        <p>And a Name</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Some Other logo</h2>
        <p>And another Name</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Some logo</h2>
        <p>And a Name</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Some Other logo</h2>
        <p>And another Name</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Some logo</h2>
        <p>And a Name that is quite a bit longer than the other one before it.</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Some logo</h2>
        <p>And a Name</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Some logo</h2>
        <p>And a Name</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Some logo</h2>
        <p>And a Name that is quite a bit longer than the other one before it.</p>
      </a>
    </li>
  </ul>
</main>

body {
  background: #000;
  font-family: sans-serif;
}
main {
  background: #fff;
  margin: 2em auto;
  max-width: 60em;
  width: 94%;
  border-radius: 30px;
}
h1 {
  text-align: center;
  font-size: 3em;
}
h1 span {
  display: block;
  font-size: 0.6em;
  font-family: serif;
  font-style: italic;
}
.boxes {
  margin: 16px auto ;
  padding: 0;
  text-align: center;
  display: flex; /* Apply Felx to the parent box */
  flex-flow: wrap; /* Allow wrapping onto new lines */
  justify-content: space-around; /* space evenly on the horizontal */
}
.boxes li {
  display: inline-block; /* Not needed with flex, but a fall-back for old IE versions */
  flex: 1 1 12em;
  /* The first two values are flex-grow and flex-shrink, both have a value of 1 to alow both to happen. The third is flex-basis, the desired width (still allowing grow and shrink) using em means text zoom is no problem and there is no need for queries */
  border: 2px solid #6F0212;
  border-radius: 25px;
  margin: 8px;
}
.boxes a { 
  text-decoration: none;
  padding: 8px;
  height: 100%; /* fill the box */
  display: flex; /* the a is made flex to push the two elements apart */
  flex-flow: column; /* stack vertical */
  justify-content: space-between; /* make the logo stay top and the name go to the bottom */
}
.boxes li:hover {background: #fd6;}
.boxes h2 {
  margin: 0.3em;
}