Let’s get flexy

A succinct guide to getting started with Flexbox

Flexbox is a very popular tool in creating responsive CSS for your webpage! The aim of flexbox is to allow for more efficiency when laying out, aligning, and distributing items in a container. It allows for the items in a container to fit available space by altering height, width, and order. A special feature of flexbox is that it’s not tied to one direction (top to bottom (block) or left to right (inline)).

Flexbox is easy to jump right into, with little to know prior knowledge, but the more you use it the more you realize just how powerful it actually is. Since it’s not just a single property, but instead the whole shebang there are both parent and child properties to take into account.

So, let’s start with our parent, our container.

First things first, we have to tell our CSS that we do indeed want to use flex in our design. We do this by assigning flex to our display property.

Now that that’s done the fun can begin!

First up is flex-direction. This is our basic columns and rows, and it determines the direction of the main axis. Default direction is “row”, which is left to right if you’re coding in a language that reads left to right and right to left if you’re coding in a language that reads right to left (which let’s be honest, I think that’s a pretty cool little feature). If you want your objects to move horizontally in the opposite direction of your default reading direction. If you don’t want your objects to flow horizontally we have the column options. Column is simply top to bottom, while column-reverse is bottom to top.

Next up is wrapping.

No, not that kind of rapping, Wrapping. Since most of the time you don’t want a never ending page scrolling left to right, being able to decide how your objects will wrap when they reach an end of your container is the next logical step. Obviously it’s called flex-wrap and by default there is no wrapping, all flex items will be on one line. Your other two options are wrap where when an item hits a wall in whatever direction you’ve already told it to go, the next items will wrap onto the next line from top to bottom, and you guessed it! Wrap-reverse goes from bottom to top!

Now, we have direction and we have wrap, what if we could have both, all in one?! We can! And it’s flex-flow! Makes sense, right? Flex-flow’s default takes our defaults from our previous direction and wrap, so it’s row and nowrap.

So, pick your combo and go wild!

Next up we can talk about spacing with justify-content which talks about alignment on whichever main access you’ve previously defined. It determines how you distribute your objects, and what you do with the extra space leftover. Your choices are flex-start which aligns everything to the right and just leaves your empty space at the end. Flex-end does the exact opposite, starting at the end and leaving empty space at the beginning. Center aligns everything in the center, leaving empty space on both sides. Space-between aligns to left, right, and center, leaving empty space between your items. Space-around leaves equal space around your items, which does mean that the space at the left and right will be smaller than in between items. And lastly, space-evenly, my personal fav, this one does exactly that, it leaves even space around all sides of each item, and is generally in my humble opinion the most pleasing to the eye.

And there we go! Just the first few things you need to know to get started with flex-box! Come back soon to learn about alignment, and more!