Flexbox: A smart way to make the webpages responsive.

What is Flexbox?

The Flexbox Layout is derived from the word “Flexible” which means to emphasize on making the items
in the CSS containers flexible enough to adjust or align according to the display devices. Flexbox module
is responsible to adjust the spaces between the items in the container by altering their width or height.
Flex layout has a big advantage over the regular layout as it can work well for even the most detailed
applications in case of layout changes or resizing them. Flex layout follows the flex flow direction for the
alignment unlike the regular layout which is based on block flow and inline flow directions. Flex layout
has two axes one is the main axis, the other one is cross axis which lies perpendicular to the main.

The Flexible Box Layout Module (Flexbox) is an excellent css tool which will make your content in the
container responsive. There are majorly two main parts of a flexbox i.e. flex items and flex containers.
The flex container can be termed as parent and the flex item can be termed as children.

Flex properties

Parent properties (flex container): the definition of the container is wrapped inside a body having a
keyword .container. Each flex property of the container can be defined inside this body.

.container {

Some flex container properties are as follows:-

1. Display: To define the flex container by initializing it with the space allocation we use this
property. It can be either an inline or block allocation. We set the display property to flex like
below.

.container {

display: flex;

2. flex-direction: This is the most important property in the flexbox layout which defines the axis
for the item layout. Flex-direction can be used to stack the items either vertically or horizontally.
Once the main-axis for the container is defined the flex items can be placed accordingly as per
the direction. For stacking the items vertically we use the column option whereas row option is
used to stack them horizontally.

.container {
flex-direction: row | row-reverse | column | column-reverse;
}
3. flex-wrap- The flexbox layout is by default responsible to fit all the flex-item in single line but
you can explicitly change this property using flex-wrap which defines if the items should be
wrapped or not. By default flexbox has nowrap property which fits all the items in a single line
(in this case items may overflow) while the wrap property will allocate the flex items to multiple
lines.
Below is the syntax demonstrated:-
.container{
flex-wrap: nowrap | wrap | wrap-reverse;
}
4. The flex-flow – This property is a together defines the flex-direction and flex-wrap properties.
Rather than providing separate definitions to these two properties we can define both of them
with flex-flow which will set main and cross axis.

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

Example:

.container {

flex-flow: row wrap;

5. justify-content- justify-content property will align the flex items horizontally along the main
axis. This property is used to manage the space that is left after the flex-items were allocated
space in container. If in case of the overflow it also helps to manage the alignment of items.
There are several keywords of this property with which flex items can be arranged.
Example:
.container {
justify-content: flex-start | flex-end | center | space-between | space-around |
space-evenly | start | end | left | right ... + safe | unsafe;
}
6. align-items- This property aligns the flex items along the cross axis or vertically. As we know the
cross axis lies perpendicular to the main axis hence it aligns the flex items perpendicular to main
axis.
Example:
.container {
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last
baseline | start | end | self-start | self-end + ... safe | unsafe;
}

Children properties (flex item):

Any flex- item placed inside the container becomes the children and is identified by the keyword
.item. Below are the flex item properites:-
1. order-The order property of flex item will show the order of the item placed. It is not necessary
that the first item in the container is treated as first in order. The default order value starts from
0 and by default all order number according to the source order. Order proper can let you alter
the default order by defining the order by integer value
Syntax:
.item {
Order : <integer value>; /* default is 0 */
}
2. flex-grow- This flex-item property defines the the expansion of a flex item corresponding to
other items. It is just like setting priority for the space allocation to the item. If the flex-grow is
set to 1 for all the elements in container then the leftover space will be equally allocated among
the elements of container. If any element is given order 3 then that number will grow thrice as
other elements during the space allocation.
item {
flex-grow: < integer value >; /* default 0 */
}

3. flex-shrink- This property adjusts the flex-item by making them shrink relative to the other
items. The value of the item can be assigned and the flex shrink has a value of default value of 1.
This means that in case of the lack of space all items will shrink by a factor 1 or equally. If any
element is given the flex-shrink value as 0 that item is exempted from the shrinking.
Syntax:

.item {

flex-shrink: <number>; /* default 1 */

}
4. flex-basis- It initializes the size of the flex-item by giving it a value.
Syntax:
.item {
flex-basis: <length> | auto; /* default auto */
}

5. align-self- This property can override the alignment that was defined by the align-items property
for a flex-item.
Syntax:
.item {

align-self: auto | flex-start | flex-end | center | baseline | stretch;

}
We can make responsive & progressive web apps to give best UI experience and readability to user
using the flexbox layout. Flex is intelligent enough to understand the content of application and
adjust its alignment.