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.
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!
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.
Not all children are flexed equal
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.
on both of the bordered children. See how their area stretches all the way to the elements that didn’t receive the same property!
would be enough to solve the problem.
The main points
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
property, the items will only take enough space to wrap their content, leaving unused space inside the parent container. Last, the
property isn’t mandatory, use this in your favor!
will let you create beautiful websites with little effort!