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:
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
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
1) Display
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.
Code-
//the parent container
.wrapper {
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*/
.wrapper {
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.
3) Flex-wrap
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
.wrapper {
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.
4) Flex-flow
The flex-flow is a shorthand property which takes flex-direction and Flex-wrap values.
//wrapper is parent-container
.wrapper {
flex-flow: row wrap; /*direction “row” and wrap the children i.e wrapper-items.*/
}
5) Justify-content
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
.wrapper {
justify-content: flex-start / flex-end / center / space-between / space-around
}
6) Align-items
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.
Code:
//wrapper is parent-container
.wrapper {
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.
