Understanding Flexbox By Small Steps

Flexbox is a useful front-end technology, which can easily organize HTML items and create beautiful and responsive layouts. Leading companies rely on it to make their websites accessible in every screen possible, which granted it the status of an industry-standard tool.

I currently study software development at Microverse, a global school which values knowledge-sharing and teamwork. From day one, they assigned me a coding partner, with whom I shared the experience of learning and building websites.

I was lucky enough to be paired with someone who had previous experience in software development. From the first project, he taught me how to use

flexbox

and the importance of having a good grasp on it.

Although I learned a lot from him, there were some points I figured out by myself and I would like to share, so other beginners won’t be afraid of using this awesome technology!

Brace yourselves and let’s flex those boxes!

You’re a box, you’re a box, everybody is a box!

Every HTML element is a box. Although this is a basic concept from the box model, remembering it can be powerful when writing a clean and readable code!

Whenever you feel the need to organize a section using flex, check if any HTML tag is the parent of all the elements you want to move. This prevents you from creating unnecessary containers that make your code confusing.

Space… The final frontier!

I lost track of how many times I tried to organize my items inside a container, and they wouldn’t move a pixel. This changed when I understood that, for motion, we need space first.

The parent container should always be bigger in the direction you want to move your items. If you want them to move vertically, it needs to be taller then its children. If horizontally, make it wider.

Padding does not count towards the space available! That’s why I always prefer to work with box-sizing: borderbox. I simply declare the width and height of my parent container, and if I add a padding later, it will be deducted from the dimensions I determined. The items inside will be moved accordingly, and the size of the parent container won’t change.

If it fits, it sits

This one troubled me when I was learning Bootstrap. I created a navigation bar, and I wanted it to have borders between its anchors, but all I got was this.

I couldn’t understand what I did wrong until I checked on the content boxes of each item applying a background to them.

There was free space between the items! If they don’t touch each other, the borders will not look good!

What should I do in this situation?

flex: 1

to the rescue! It tells them how much of the available space they should occupy in relation to the others. I applied this property on each item, which effectively divides the remaining space equally between them.

You can check my repository on Github or its live webpage to see the final result.

Not all children are flexed equal

Anyone who has read a little about the

flex

property is aware that its value can be any positive integer, and it determines the portion of the parent’s free space that the child will take.

Something I wasn’t aware of is that unlike order, flex doesn’t need to be present in every child. The ones that receive this property will take all the available space, while the others will maintain their initial size.

The next image shows the navigation bar of my project where I apply a website concept to create a fictitious headphones shop. I needed the menu button to be in the middle of the screen, and the sections links to be halfway between the logo and the menu.

I applied

flex: 1

on both of the bordered children. See how their area stretches all the way to the elements that didn’t receive the same property!

Be aware of your anchors, though. As they are stretched, so is their clickable area. Wrapping your anchor in a

<div>

would be enough to solve the problem.

The main points

What do we learn with the four cases above? First,

flex

is about dividing a space inside a box. Whenever you feel like organizing items in a row or column fashion, check if they are already under the same tag. Second, just like furniture in a room, children elements need space inside their parent container. Third, if you don’t use the

flex

property, the items will only take enough space to wrap their content, leaving unused space inside the parent container. Last, the

flex

property isn’t mandatory, use this in your favor!

With those concepts in mind,

flexbox

will let you create beautiful websites with little effort!