There are many techniques to vertically center elements but all have looked some or the other way, quite hacky as developers have always been looking for an elegant solution to accomplish vertical centering.
Ironically, people say CSS is easy but things like doing vertical centering has always made developers go crazy to find one elegant solution to the above problem in contrast to what they need to do for horizontal centering. Thank god, there is flexbox which has lessened the woes of developers.
What is the Flexible Box?
The flexible box layout is an alternative to grid layout in which there is no media query for particular breakpoints. Instead, it’s all about accommodating elements at a limit till which you can accommodate elements and then break it.
Flexible box gives more power and freedom to layout the structure.The child elements inside a parent container can be stacked vertically or horizontally by a difference of only one line of code. Isn’t it cool?
Flexbox layout helps developers in building responsive layouts with less of a worry about stacking things on different viewports and centering of things. Flexbox gives power to developers to lay out content as they want to be with minimal code. For e.g. if a developer wants 2 divs (i.e. A and B) to be horizontally stacked as A and B but vertically stacked as B and A. So, he/she just has to write:
It’s that simple. Isn’t it cool?
A Glance through flexbox properties
Taking .wrapper as default parent class and .wrapper-list-items as its children
Display property of Flexbox is used to tell the browser on how to layout the parent container in the flow of document of web page.
There are two possible display values: flex and inline-flex.
The only difference between the two values is that display:flex makes the parent element behave as if it has display:block property i.e. occupying full width of the web page and display:inline-flex makes the parent container to behave as if it is an inline element.
Display property is used for parent container on which we want to apply flex property and the actual layout is carried out on its child elements.
//the parent container
display: flex || inline-flex;
2) Flex Direction
Basically, “horizontal” and “vertical” isn’t what the directions are called when we deal with flex.
These are described as main-axis and cross axis. By default, the flex-direction property is set to row and it aligns the flex-item(s) along the main axis.
/*where wrapper represents a flex container*/
flex-direction: row || column || row-reverse || column-reverse;
The flex items are then laid across the main-axis, stacking horizontally from left to right. If the flex-direction property is changed to column, the flex-items would be aligned along the cross axis i.e. top to bottom.
This property defines whether the child elements should break if there isn’t enough space to accommodate all the child elements and if it’s allowed by making it wrap, then we could also change the direction in which the child elements should wrap.
//where .wrapper represents a flex container
flex-wrap: wrap || nowrap || wrap-reverse;
“Wrap” is a fancy word to say. In simple words, when the available space within the flex-container can no longer house the flex-items in their default widths, it breaks into multiple lines.
The flex-flow is a shorthand property which takes flex-direction and Flex-wrap values.
//wrapper is parent-container
flex-flow: row wrap; /*direction “row” and wrap the children i.e wrapper-items.*/
It defines the alignment of the child elements along the main axis of the parent container. It equally distributes space among the child elements if all the child elements don’t occupy 100% space along the main axis of parent container.
The justify content property defines how flex items are laid out on the main axis.
Justify content has 5 values to work upon:-
//wrapper is parent-container
justify-content: flex-start / flex-end / center / space-between / space-around
This property defines how Flexbox items are aligned according to the cross axis, within a line of a flexbox container. So, if the flex-direction is row by default so the cross axis is perpendicular to the row.
Align-items can take any of the below 5 values:
1) align-items: flex-start; – The Flexbox items are aligned at the start of the cross axis.
2) align-items: flex-end; – The Flexbox items are aligned at the end of the cross axis.
3) align-items: center; – The Flexbox items are aligned at the center of the cross axis.
4) align-items: baseline; – The Flexbox items are aligned at the baseline of the cross axis.
5) align-items: stretch; – The Flexbox items will stretch across the whole cross axis.
//wrapper is parent-container
align-items: flex-start || flex-end || center || baseline || stretch
So, above are some of the basic properties of Flexbox that I’ve covered which will atleast give you a head-start of Flexbox.
But as the saying goes – ‘With great power, comes great responsibility’, we should have a clear mindset as to when to use Flexbox for our layouts.
Here are some complexities related to using Flexbox-
Don’t use Flexbox for page layout. Flexbox is more powerful for laying out structure of components but not for a full web application. For laying out the structure of the page, it’s still a better practice to use grid system and then we could use Flexible box to layout components and their child elements.
Flexbox has come to make our lives easier, not difficult. We know it’s easy to layout elements inside a flex container but we shouldn’t overuse it if it could be done in more simpler ways. For example- to center text inside a span, we shouldn’t go for flex layout as there are much simpler ways to do it. So why complicate simple things?
Don’t use Flexbox if you need to support older browsers like IE-8 or IE-9 as support for Flexbox is present only on IE-11 and above. So, backward compatibility is a big issue for Flexbox. For browser support of Flexbox , you can refer- http://caniuse.com/#search=flexbox
I would also like to compile a set of resources which have inspired me to get the gist of Flexbox and helped me when I got stuck on minute things in Flex-