Flexbox for Dummies
For newbie web devs, simple ideas can often be some of the most difficult to execute. If one doesn’t know the right approach, even the most seemingly fundamental tasks can quickly turn into several hours and at least a few chunks of hair lost. One common problem that I and likely many others repeatedly came across in my earliest days of CSS styling was the age old question:
“How do I align these damn objects into a grid!?”
It’s a fair one to ask with an answer that can prove elusive to even the most skilled of Googlers. And that’s why I’m here today — to provide you with a by-a-beginner-for-a-beginner explanation of my favorite solution:
Flexbox.
Want to read this story later? Save it in Journal.
What is Flexbox?
In simple terms, Flexbox is a CSS module that allows a designer to dynamically align a collection of items within a container. Not only is Flexbox incredibly easy to implement and work with, but it’s also quite flexible in that it will automatically adjust the contents of the flex container to fit a device’s screen size.
As a module, Flexbox has numerous attributes that can be used to dictate where and how our items display, some of which apply to the flex container while others apply to the individual items themselves. This being an absolute beginner’s guide, we’re going to stick to the basics and leave the more granular details to the flexperts (lol).
Flexbox in Action
Let’s say we’re building a website designed to display a random number of random (adorable) fox photos in a neat gallery on the page. The unpredictable nature of our app means that we’re never sure how many images are going to load and what the aspect ratio of those images are going to be. Sounds like a recipe for a mess! Let’s use Flexbox to make this site just as cute as the foxes within.
While the bulk of our work to tackle this problem is going to be done in CSS, let’s first take a very quick look at our React JSX code to get an idea of what we’re starting with, before we move on to Flexbox.
And right now, this is what our page looks like:
Not so nice! And definitely not worthy of the cuteness levels contained within. Let’s navigate over to our index.css file and get to work.
We already know that certain Flexbox attributes pertain only to the flex container (our gallery) while others apply only to the items themselves (cute foxes). That means, in order to modify the layout of our gallery, we’re going to need to apply some Flexbox attributes to the container holding our images. And look at that — in the JSX code above, you’ll see that we just so happen to have a div element with a class of container already conveniently wrapping our collection of photos. How nice! Let’s target that in our CSS and apply our first Flexbox attribute:
display: flex is essentially the call to apply Flexbox to the targeted element. This line of code is what allows us to unlock the many wonders of Flexbox. So, let’s refresh the page and take a look at our beautiful new galler —
…Oh. Okay, so we’re not quite there yet. While Flexbox is a wonderful and powerful tool for designers, it’s not magic! We know that we have a whole host of individual attributes available to us to dictate how we want our collection to look, so let’s add another:
Flexbox will force all of the children elements of a container onto a single line by default, so we can use the flex-wrap attribute to fix that. The value can be set to wrap for a standard top to bottom wrap, or wrap-reverse to wrap from bottom to top. Let’s refresh the page again.
Wow —just four lines of code and we’re already looking much better! But now the random nature of our app is starting to mess things up a little bit — I’m not a huge fan of how the varying image widths are causing a staggered effect on the right side of our page. Let’s take a look at how another Flexbox attribute can help us with that!
justify-content will tell Flexbox how to space the items within the container. We have several options here, including flex-start flex-end center space-between space-around space-evenly and more. Let’s see how space-between looks.
Cool! As you can see, space-between distributes the items in our container evenly across the row, adjusting the space between each image so that the first and last of each row aligns. Let’s quickly peek at the other options we mentioned!
flex-start will justify the items within the flex container to the start of the flex-direction (another attribute that defaults into a left to right row, which is what is applied to our app currently since we’re not specifying a value for that attribute.)
flex-end will justify the contained items to the end of the flex-direction
center aligns the items to the center of the container element.
space-around applies an equal amount of white space between each object in a given row, excluding the container edge.
space-evenly differs from space-around only subtly in that it also takes into account the container edges when applying white space.Let’s just go with space-evenly for now, apply a few more bits of non-Flexbox CSS to tidy up a tiny bit, and…
Ta-da! We’ve used the power of Flexbox to give our gallery of adorable fox photos a clean and standardized look with just a few simple lines of code. And the best part is that no matter the screen size of the client device or the number and collection of cute foxes the gods of RNG decide to give us, our page still looks nice! Take a look:
Flex on ‘em
In order help fully visualize the differences between the Flexbox attributes we’ve discussed here today, I’ve deployed an interactive version of Flex Fox for your viewing pleasure! This build looks and operates exactly like the one we created above, but also includes added functionality to allow live toggling between several different values for flex-direction flex-wrap and justify content to more easily spot the differences between them. Now our app is cute and useful! Check it out here:
Flexbox is a powerful and easy-to-use tool for designing your website. We’ve covered only the most basic of fundamentals in this beginner’s guide, but the module has several other attributes available that we didn’t have time to touch on here. I highly recommend checking out css-tricks.com’s Complete Guide to Flexbox for a comprehensive look at everything the technology has to offer. Happy coding!
📝 Save this story in Journal.
