Flexbox

by Matthew Day

HTML

<div>
  <ul>
    <li>Suspendisse odio justo, pharetra</li>
    <li>bibendum magna consectetur, tincidunt varius magna.</li>
    <li>Curabitur tincidunt</li>
    <li>condimentum tortor</li>
    <li>in fermentum. Nullam facilisis in velit sit amet convallis.</li>
    <li>Morbi egestas,</li>
    <li>neque ac pulvinar porttitor</li>
    <li>mi turpis varius nisi,</li>
    <li>id vehicula eros odio ut elit.</li>
    <li>Proin non urna vitae dolor fringilla ultrices quis at nibh.</li>
    <li>Integer sapien nisl,</li>
    <li>porttitor ac accumsan feugiat, porta eget erat.</li>
    <li>Nullam</li>
    <li>commodo nisl in odio pellentesque tincidunt. Cras lacinia mauris eget massa rhoncus, at hendrerit augue lobortis.</li>
  </ul>
</div>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

div {
  padding: 16px;
}

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

li {
  background-color: thistle;
  margin-bottom: 12px;
  width: 86px;
}

JavaScript

/*

Experimenting with Flexbox

*/