CSS: flex chips

by Jens Kühn

HTML

<div>
  <ul>
    <li>
      <b>Name</b>
      <p>1</p>
    </li>
    <li>
      <b>Name</b>
      <p>2adjsakdh ksahdakdh sakdhda</p>
    </li>
    <li>
      <b>Name</b>
      <p>3</p>
    </li>
    <li>
      <b>Name</b>
      <p>4</p>
    </li>
    <li>
      <b>Name</b>
      <p>5</p>
    </li>
    <li>
      <b>Name</b>
      <p>6</p>
    </li>
    <li>
      <b>Name</b>
      <p>7</p>
    </li>
    <li>
      <b>Name</b>
      <p>8</p>
    </li>
  </ul>
</div>

CSS

ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
}

li {
    background-color: lightgreen;
    background-clip: padding-box;
    flex-basis: 33%;
    padding: .5em;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    flex-grow: 0;
    flex-shrink: 1;
    box-sizing: border-box;
    border: 1em solid transparent;
    border-radius: 1.5em;
}

b {
  font-size: .6em;
}

p {
  word-break: break-all;
}
b,p {
  display: block;
  margin: 0;
  padding: 0;
}