CSS Flexbox 101: Vertically Align your items Now
I apologize for the clickbait title. I believe many of us still believe CSS is that messy thing everyone wants to avoid. Its 2017 and that is no the case anymore.
So in this post we will learn about CSS3 flexbox model. YAY!! 🙌
Spoiler Alert: It changes everything.
Bootstrap 4 beta was released earlier this year and moved to flexbox & Sass from outdated block model & Less. There are still some bugs in Bootstrap 4 but people are getting excited about the new framework on flexbox. So let us get some basics down on flexbox concepts.
The CSS3 Flexible Box, or flexbox, is a layout mode intended to accommodate different screen sizes and different display devices. For many applications, the flexible box model is easier than the block model since it does not use floats, nor do the flex container’s margins collapse with the margins of its contents.
1. The Parent and the Child
To make any element follow flexbox properties, there should be two components. The container (parent) and the items (child) which are inside the container.
To initialize flexbox just put
display:flex in the parent element i.e in
There are 2 properties that get applied by default on initializing display: flex;
.containerhas the follow properties assigned
Let change flex-direction to column and see what we get
Now that we have introduced flex-direction, there is one more concept we need to know which is crucial in understanding how flexbox works. In flexbox we have 2 axis
If the flex-direction is row then the
main-axisruns from left-to-right and the
cross-axisruns from top-to-bottom.
If the flex-direction is column then the main axis now runs from top-to-bottom and the cross-axis runs from left-to-right.
2. Properties of Parent
In flexbox, some styles only applies to parent element & some styles only to the child element.
justify-content aligns all the children items along the main-axis.
Lets center all the items horizontally
align-items aligns all the children items along the cross-axis.
Lets center the items vertically. (See I was not kidding in my Title) 😜
I recommend to play around different properties of justify-content and align-items along with flex-direction.You can find the detailed flexbox properties here.
3. Properties of Children
We can now reorder any child item we like. This comes super handy when we want some div to show up in mobile website.
By default the order of all the items is 0. If you assign any item with order >0 or <0, the item will move from its place.
Lets see an example
This is one of the most frequent property we will use while using flexbox. Flex is a shorthand for three properties flex-grow; flex-shrink; flex-basis.
flex-growCSS property specifies the flex grow factor of a flex item. It specifies what amount of space inside the flex container the item should take up.
flex-shrinkCSS property specifies the flex shrink factor of a flex item. Flex items will shrink to fill the container according to the flex-shrink number, when the default width of flex items is wider than the flex container.
flex-basisCSS property specifies the flex basis which is the initial main size of a flex item. This property determines the size of the content-box unless specified otherwise using box-sizing
To know more you can watch this awesome tutorial by Wes Bos
Lets take an common dashboard layout to see this properties in action.
Here is a fun exercise to practice what you have learned so far. Last stage is pretty tricky, do post your screenshot after you complete the challenge 📷.
Here are some excellent resources to deep dive into CSS flexbox.
If you liked this article please leave 👏 as an appreciation.