I'm Lazy and I Know It: Confessions From a Flexbox Nester
I recently had a student ask me "How exactly can CSS Flexbox be used efficiently?" It got me to thinking about how I've used Flexbox in the past and I've come to the conclusion that it's time for me to change my ways. School is over. Strangers are looking at my code. Time to get back in there and do some refactoring.
What do you mean? What's wrong with your flexboxes?
If you were to look at a lot of my work from my course, you'd see I heavily favored manipulating 2 dimensions with nested flexboxes. Why? Because I knew Flexbox, I can visualize my layout and containers easily with it, I'm crazy quick with it, and I'm lazy. Wait, what? Yes, that's a terrible thing to admit, usually. But as a developer, if you're not a little bit lazy, you're spending a lot of time writing code you don't need to.
That being said, there's such a thing as too lazy. I shout "Clean, clear, concise" until my ears bleed. In this case, I'm actually complicating and bloating my CSS. Gross! If I continue to use nested on nested flexboxes to create layouts, as my works grow, I'm going to sacrifice performance and possibly just confuse any other dev I try to work with. I realize the error of my ways and I've finally decided to do something about it. Hopefully my past, current, and future students will benefit from my admission and research. (Be lazy. See?)
So how do we create efficient layouts without stifling our creativity?
Calm down! We need to revamp our toolbox first. Throw away position attributes(for the most part). Yes you can be very granular with them but you have to micro-manage a lot of these when you start getting into responsive design. Now let's forget tables existed like... ever. Yeah tables used to be great. They line things up so nice for us before. But tables are rigid and design these days needs to be more flexible than ever. We can do better. Now floats. I don't think I've ever seen a student use the float property on something that couldn't be done with Grid and/or Flexbox. Maybe it's useful... somewhere. We're just going to pretend it's in time out for a while.
What are we adding? Well if that's not obvious by now that's ok. I tend to ramble. We're going to start using CSS Grid in conjunction with Flexbox.
I was taught CSS Grid. I mean, I knew it existed? We touched on it way back in week 2 of my course. Which means technically I've been reminded of it twice now as well. Grid is an impressively robust tool that is more maliable than it may, at first, seem. I hear the word "grid" and I think of a checker board. Right? All square boxes and everything is the same size and there's no way you're going to be able to do that cool thing with your layout that you wanted to!
Well, it is so much more, my friends. And used in conjunction with Flexbox, you can easily create efficient layouts that don't have to look like... well... a checkerboard.
Get on with it!
Yes, yes ,ok. CSS Grid is designed to manipulate two dimensions. What does this mean? Well you can use it to place elements where you want them horizontally and vertically. Flexbox, on the other hand, is meant to manipulate only one dimension. You can either control Flexbox as a row, or as a column, but not both unless you start nesting them. Is that bad? Eh... it's a debate. What it is for sure is a good deal more code and, while it might not be noticeable on a small scale such as the activities and projects we do in our course, it can start to put a damper on your project's performance. Double gross.
Getting into CSS Grid
Let's look at a simple(Really simple. As in, I would like to add more 'e's to really) example of a layout with CSS Grid:
To create this, our code might look something like this:
----HTML----
<body>
<div id="grid-container">
<header>Header</header>
<article>Article</article>
<main>Main content</main>
<footer>Footer</footer>
</div>
</body>
----CSS----
#grid-container {
width: 100%;
min-height: 100vh;
display: grid;
grid-template-rows: 5rem auto 5rem;
grid-template-columns: 0.5fr, 1fr;
}
We've created a grid that contains our header, article, main content, and footer. We've set the height of each row. Use what measurements make you comfortable. I've used ems and rems for a long time. I'm delving into frs. They make sense to me. What's most common? I think that will depend on your employer/partners. I'd get familiar with everything, honestly.
领英推荐
Anyway, we've also declared how many columns and rows we're going to have. If you look at the attributes, we have three heights in the rows attribute and two widths in the columns attribute. Using this logic, you can likely figure out how to make even more rows and columns when you're more comfortable with Grid.
Hey, hey what about all the elements?
Yes, now we have to fit our elements inside of our grid. This is where you can do some pretty nifty things but I'm going to stick to the basics. Your imaginations can do the rest.
header {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
Let's start with this. It looks... confusing? It's really not actually. What we are saying here is that our header needs to span from the first line(the leftmost side of the grid) to the 3rd line(the right most side of the grid). Because we have two columns, we have three lines. See? Now as for the rows, it will go from the first line(topmost) to the second. Let's add the rest of our elements.
article {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
main {
grid-column: 2 / 3;
grid-row: 2 / 3;
}
footer {
grid-column: 1 / 3;
grid-row: 3 / 4;
}
Take what we learned from our header and apply your knowledge to these elements and now we have our layout! It's easier than you though? Great!
You mentioned something about Flexbox...
I sure did! Flexbox has always been fun. Let's say we want to add some elements to give our page some character. Let's add some navigation to our header and an image and some related text to our article.
<body>
<div id="grid-container">
<header>
<a>Link</a>
<a>Link</a>
<a>Link</a>
</header>
<article>
<img/>
<p>Paragraph</p>
</article>
<main>Main content</main>
<footer>Footer</footer>
</div>
</body>
Well we want to be able to be a bit more granular about our links, image, and paragraph. We want something kind of like this:
Here, Grid has allowed us to place our basic elements where we want them. Flexbox is going to allow us to fine tune their children. So we want our navigation links lined up on the right and we want our paragraph to stack over our image.
Again, I'm going to point out that I know these are super duper basic. Yes, there are much better ways to employ these tools, but we need a simple design for the sake of the lesson. I count on your creativity to blossom once I set you free.
Let's take a look at our CSS from before and add what we need to achieve our goal.
header {
grid-column: 1 / 3;
grid-row: 1 / 2;
display: flex;
justify-content: flex-end;
align-items: center;
}
article {
grid-column: 1 / 2;
grid-row: 2 / 3;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
main {
grid-column: 2 / 3;
grid-row: 2 / 3;
}
footer {
grid-column: 1 / 3;
grid-row: 3 / 4;
}
We've added flex properties to our header and our article! And that's it. We have combined CSS Grid and Flexbox to create an efficient, flexible layout with honestly a very small amount of code. The lengths I would have to go to if I wanted to create this with nested flexboxes. I shudder at the idea of going back and looking at my course work. It's probably a horror show. But I am excited to get in there and rip out the hot mess I made in favor of combining these two amazing tools.
Now what?
Really I hope that this inspires some newbie developers and some of my students to work more considerately with their front ends. I always strongly advocate writing your own CSS before you get into frameworks for as long as possible. Employing these tools together will help get an understanding of what your frameworks are doing and if you do come across a project that doesn't use one, you'll be able to make beautiful designs with clean, clear, and concise CSS.
Now that you've seen them in action, go out and see how else you can combine CSS Grid and Flexbox to achieve your layout dreams. I'd be excited to see what you come up with! Good luck and happy coding!