Practical uses for Flexbox

Yesterday, we learned how Flexbox works. Today, I wanted to dig into some practical uses for it.

Let’s dig in!

Inline lists

One of my favorite uses for Flexbox is inline lists.

Imagine you have a list of items that you want to display in a row instead of as a standard bulleted list…

<ul class="list-inline">
	<li>Merlin</li>
	<li>Ursula</li>
	<li>Radagast</li>
</ul>

We can use Flexbox to do that.

For inline lists, I set flex-wrap to wrap. I also like to align-items in the center, but that’s a stylist choice that may vary from project-to-project.

The list-style-type property set to an empty string ("") removes the bullets while retaining list semantics.

.list-inline {
	display: flex;
	gap: 1em;
	flex-wrap: wrap;
	align-items: center;
	list-style-type: "";
	margin-left: 0;
}

Here’s a demo.

Inline list modifier classes

My preferred approach to CSS architecture, HUG CSS, makes heavy use of modifier classes to nudge and tweak components.

For our .list-inline, I often include modifier classes to adjust the amount of gap between list items as well as classes to modify the alignment.

.list-inline-spaced {
	column-gap: 2.875em;
}

.list-inline-compact {
	column-gap: 0.5em;
}

.list-inline-center {
	justify-content: center;
}

.list-inline-end {
	justify-content: flex-end;
}

Here’s another demo.

Navigation menus

Another thing I make heavy use of Flexbox for is navigation menus.

Often, I the .list-inline class does the trick. But for a menu like the one on the top of my website, I’ll often create a separate class to control the relationship between the logo and the nav items.

Here, I’m using a .nav-list class along with my .list-inline class.

<nav class="nav-list">
	<a href="/">Go Make Things</a>
	<ul class="list-inline">
		<li><a href="/about">About</a></li>
		<li><a href="/articles">Daily Tips</a></li>
		<li><a href="/resources">Resources</a></li>
	</ul>
</nav>

We already have our .list-inline style. Now let’s style up the .nav-list.

For this layout, I often reach for the justify-content: space-between property to push the logo to one side and the nav items to the other.

.nav-list {
	display: flex;
	justify-content: space-between;
}

Here’s a demo of the nav.

Building reusable layout components

If you need help building reusable layout components like these for your project, I have one consulting spot currently available.

I’ve worked with clients big and small (from organizations like Harvard Business School and NASA to small nonprofits). I’d love to work with you, too!