From Float to Flexbox

Red, yellow, and green cartoonish frogs, each on a lily pad.

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.

3 large icons coupled with money value and description.

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!

Advertisements

One Reply to “From Float to Flexbox”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s