Flexbox easily lets us create dynamic layouts that used to require a lot of CSS gymnastics, if they were even possible at all. But you need to be careful. Here, I want to talk about a new coder’s disease that has come to town: Flexitis.
But first, let me go back to long ago, before the days of smartphones and front-end frameworks, when the web development world was taken by storm with the introduction of a very special tag: the div.
CSS and div tags allowed the creation of more flexible, dynamic layouts than were possible with the tables that came before them. But a coder’s virus spread as more and more people started using divs and CSS. We called this condition “Divitis.” (No, I’m not making this up!)
Web designers and developers who didn’t completely understand HTML and CSS started adding divs around everything. The general philosophy was, “Not working? Try a div!”
Code like this was common:
<div id="container">
<div id="header">
<div id="logo">
<div><h1>My Website</h1></div>
</div>
<div id="navbar">
<div id="nav-list">
<div class="nav-list-item"><a href="#">Home</a></div>
<div class="nav-list-item"><a href="#">About</a></div>
<div class="nav-list-item"><a href="#">Services</a></div>
<div class="nav-list-item"><a href="#">Contact</a></div>
</div>
</div>
</div>
<div id="main">
<div id="content">
<div class="article">
<div class="title">
<div><h2>Welcome</h2></div>
</div>
<div class="text">
<div><p>This website suffers from serious divitis!</p></div>
</div>
</div>
</div>
</div>
<div id="footer">
<div><p>© 2009 My Website</p></div>
</div>
</div>
Lots of unnecessary div tags!
This sort of HTML was typically accompanied by a whole mess of CSS, but I’ll save that for another time.
What is Flexitis?
Flexbox is pretty fantastic. But I’ve noticed some harmful patterns. Developers new to HTML/CSS (or developers who hate on CSS) jump to Flexbox when there are other, better ways to accomplish the layout. Similar to Divitis, the Flexitis philosophy is, “Not working? Add some Flex!”
This causes unnecessary frustration and breeds a new generation of CSS haters. But this doesn’t need to be!
Here are four of my top tips for getting started with Flexbox to avoid frustration and prevent Flexitis:
1. Remember that “display: flex” impacts direct descendants only.
If you add “display: flex” to an HTML element, it controls the layout of all of the children of that element.
Take this example:
.flex-parent {
display: flex;
gap: 10px;
border: solid 1px gray;
}
<div class="flex-parent">
<ul>
<li>List item</li>
<li>List item</li>
</ul>
<p>paragraph</p>
<span>Some random span</span>
</div>
In this example, the list, the paragraph, and the span will all be controlled by the div named “flex-parent.” You don’t need to add any CSS to the children. It should look like this, with the elements displayed side by side:
But, the hierarchical structure of the HTML is extremely important. For flex to work, the children must be direct descendants.
What happens if we add a div around the child elements?
<div class="flex-parent">
<div><!-- yikes, an extra div! -->
<ul>
<li>List item</li>
<li>List item</li>
</ul>
<p>paragraph</p>
<span>Some random span</span>
</div>
</div>
That extra div will prevent the flex-parent from controlling the list, paragraph, and span. Now, the flex-parent will only have control of the child div, resulting in something like this:
TL;DR: You do not need to apply “display: flex” to all of the parents and children. Apply it to the parent, and make sure the children are direct descendants.
2. Use a cheat sheet.
I’ve been using Flex for years and have used it for all sorts of layouts. This doesn’t mean I know it by heart. The first thing I do when using Flex is open my favorite cheat sheet: https://css-tricks.com/snippets/css/a-guide-to-flexbox/.
I’m sure there are other great ones out there. That’s just the one I’ve used for many years, and it never fails me. Using a guide like this, you can quickly identify what is possible, which properties you need, and whether to apply them to the flex parent or its children.
3. Understand the basics of HTML and CSS.
Flexbox is great. But what’s even greater is semantic HTML that accomplishes the right layout without additional CSS!
Pretend the following needs to be recreated in code:
Using flex, a developer might try the following:
.flex {
display: flex;
flex-direction: column;
}
.flex-row {
display: flex;
flex-direction: row;
align-items: center;
}
.icon {
margin: 0 5px;
}
p {
margin: 0;
}
<div class="flex">
<div class="flex-row">
<h1>Heading</h1>
</div>
<div class="flex-row">
<p>Some Paragraph of text</p>
<div class="flex"><span class="icon">[icon]</span></div>
</div>
</div>
The result might look about right. However, with symantic HTML, this is so much simpler, with no CSS needed at all!
<h1>Heading</h1>
<p>Some paragraph of text <span class="icon">[icon]</span></p>The heading and paragraph are block-level elements, which means they will stack on top of each other. And within the paragraph, the text and icon are inline, which means they will display side by side without any line breaks.
Don’t rely on Flex as a crutch. Learn the basics of HTML and CSS. Understand semantic HTML elements. Understand block and inline elements for styling. Your job will get so much easier, and your code so much cleaner and more maintainable!
4. Consider using Grid.
My career has shifted away from front-end development and toward full-time user experience (UX) design over the last few years, so I am admittedly behind the times in my understanding and experience with CSS Grid. But I would be remiss if I didn’t mention this point. If you struggle to accomplish a layout with Flex, it might be the wrong tool for the job. Make sure you understand other tools in the toolkit, such as Grid.
Flexbox is very powerful and helpful for creating layouts, but it takes a little getting used to. If you find yourself getting lost and frantically trying different things, take a step back and review the basics. Then you can start to use flexbox (and the rest of HTML/CSS) to its full advantage instead of fighting with it. And who knows, you might end up enjoying CSS as much as I do! ;)