It only took me until 2018 to finally apply flexbox to a project. Long after I've played with the new grid syntax, and continued to fall back on floats, I am finally coming around and learning flexbox. Each display value has its own strengths and quirks, but I'll leave that for another blog post.

Challenge

I needed to arrange my visual list to space out evenly in a row without sacrificing the semantic HTML list.

Initial Code with Float

#stats ul {
  display: inline;
  list-style-type: none;
  margin: 2em;
 }
 #stats ul li {
  float: left;
  padding: 3em;
  text-align: center;
}

Flexbox Refactor

#stats ul {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  list-style-type: none;
  margin: 2.5em auto;
  text-align: center;
}

Interestingly, the amount of code is nearly the same, but it flow reads better for me since all properties are grouped under the unordered list element, rather than confusing myself more within the parent-child relationship of list and list-items. My biggest satisfaction came when the align-items: flex-end made each item flush at the bottom. Hooray!

An additional perk I anticipate after my refactor? The ease of use of media queries to stack the list again. Additionally, I can now reuse this code again, as I am often presented with visual lists to publish online.

Shout Out

Finally, a huge shout out to Flexbox Froggy! Though I'm well-versed in a lot of CSS syntax, it offered me a quick interactive tutorial in flexbox syntax. I appreciated that it started off with how to center items using justify-content and align-items, which is really all I needed for this update. Not to mention, the whole thing was short and easy to run through. Highly recommended if you need to dive right into the basics to start using flexbox right away!