How to Use CSS Flexbox to Design Flexible Layouts

Flexbox is a very handy layout for developing flexible layouts. As you know that it has always been a problem for the developer to make such a layout which is adaptive to all screen sizes. Any website which is developed only for laptop computers could be displayed poorly on desktop computers or tablets screens. This means that the elements of the web page must resize themselves or they should behave predictably (i.e. under the control of the programmer) on all screens to give a nice and clean look. To serve this purpose CSS flexbox was introduced.

Introduction to CSS3 flexbox

The exclusiveness of CSS3 flexbox (flexbox is usually a parent container) lies in the ability of altering the height and width of its child items. Flexbox alter the width and height of its child elements in such a way that it best fills the available space on any display device. A flex container expands its child items to fill available free space, or shrinks them to prevent overflow. Flexbox provides an edge over the traditional block layout or inline layout that it is not direction oriented i.e. it is not biased vertically neither horizontally actually it best fits according to the user agent.

Basic concepts regarding CSS3 flexbox

Before getting into the syntax details it is mandatory for better understanding to explore some vocabulary of flexbox. Let us have a look at this image:

css3-flexbox

In the above diagram you can see it is a normal layout in which 3 child container are horizontally aligned within a parent container. Now the question is what is the flex container and flex item

Flex container: The parent element in which flex items are contained is called Flex container.
Flex Item: Each child of the flex container is called flex item.
main axis main axis is the one along with flex items are aligned
cross axis cross axis in the one perpendicular to the main axis it is called cross axis.

Now here is a little tricky part to understand that it is not necessary that horizontal axis are the one known as main axis but it depends upon that how child container/flex item are aligned. For example if the items are aligned horizontally then the horizontal axis is the main axis, and hence cross axis is vertical axis and if the items are aligned vertically then the vertical axis is the main axis, and hence cross axis is horizontal axis.

css3-flexbox1

Till now you have learned the basics of using flex-boxes but the following additional vocabulary and syntax is necessary for designing tricky web interfaces.

Main start: The edge of the flex container from where main axis starts is called main start.
Main end: The edge of the flex container at which main axis ends is called main end.
Cross start: The edge of the flex container from where cross axis starts is called cross start.
Cross end: The edge of the flex container at which cross axis ends is called cross end.
Main size:A flex item’s width or height, whichever is in the main dimension, is the item’s main size. The flex item’s main size property is either the width or height property, whichever is in the main dimension.
Cross size:The width or height of a flex item, whichever is in the cross dimension, is the item’s cross size. The cross size property is whichever of width or height that is in the cross dimension.

Properties of CSS3 flexbox

Before we start understanding the concept of flexbox with the help of a practical example, first we should have knowledge about what are the properties of flexbox. Basically there are two types of properties i.e. properties which we applied to the parent/Flex container and the properties which are applied to the child/Flex Item.

1. Properties applied to the parent/Flex container

Properties which are applied to parent/Flex container are as under.

Syntax to enable Flex container

First we have to define parent container as a flex container by defining display to either

flex causes an element to generate a block-level flex container box, or
inline-flex causes an element to generate an inline-level flex container box.

display: flex;
display: inline-flex;

Syntax to specify the main axis

We can define main axis either horizontally or vertically by defining flex-direction to either

row set main axis to horizontal axis from left to right
row-reverse set main axis to horizontal axis from right to left
column set main axis to vertical axis from top to bottom
column-reverse set main axis to vertical axis from bottom to top

flex-direction: row;
flex-direction: column;
flex-direction: row-reverse;
flex-direction: column-reverse;

In addition to setting the direction we can also define whether the flex container is single-line or multi-line by defining the flex-wrap property to either

nowrap set flex container to single-line
wrap set flex container to multi-line
wrap-reverse is same as wrap it in reverse direction

flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;

NOTE: We can also write flex-direction and flex-wrap by using shorthand notation. flex-flow is used to combine both properties.

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

flex-direction3

Syntax to align content on main axis

We can align content on main axis by defining Justify-content property to either
flex-start align the flex items from the start to the end of main axis
flex-end align the flex items from the end to the start of main axis
center align the flex items truly centric at the main axis
space-between distribute the flex items evenly across the main axis
space-around distribut space between two adjacent items evenly

Justify-content: flex-start;
Justify-content: flex-end;
Justify-content: center;
Justify-content: space-between;
Justify-content: space-around;

The only difference between space-between and space-around is that in space-between there is no space on the sides of first and last flex items while in space-around there is space on the sides of first and last flex items and that space is equal to half the space between two adjacent items.

flexbox-justify-content

Syntax to set default behavior of flex item

We can align content on cross axis by defining align-item property to either
flex-start align the flex items with the edge of cross start
flex-end align the flex items with the edge of cross end
center align the flex items truly centric at the cross axis
baseline items are aligned such as their baselines align
stretch will stretch the flex items to fill the flex container

align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: stretch;
align-items: baseline;

flexbox-align-item

Syntax to align content on cross axis

We can align content on cross axis by defining align-item property to either
flex-start align the flex items from the start to the end of cross axis
flex-end align the flex items from the end to the start of cross axis
center align the flex items truly centric at the cross axis
space-between align first line at the start of the container and last line at the end of container; all other lines are distributed evenly between them.
space-around lines evenly distributed with equal space between them.
stretch will stretch the flex items to fill the flex container

align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: stretch;

flexbox-align-content

2. Properties applied to the child/Flex item

Properties which are applied to child/Flex item are as under.

Syntax to specifies the flex grow factor

We can determines how much the flex item will grow when positive free space is distributed by defining any number to flex-grow property. It’s default value is 0

flex-grow: <number>

Syntax to specifies the flex shrink factor

We can determines how much the flex item will shrink when negative free space is distributed by defining any number to flex-shrink property. It’s default value is 1

flex-shrink: <number>

Syntax to specifies the flex basis

We can specify the size of the flex item before free space is distributed. It’s default value is auto

flex-basis: <length>

Syntax to align a single element on the cross axis

align-self property is used to override the default behavior set by the align-items property. It has attributes similar to align-items property for example:

align-self: start;

How can you control the size of the flex items?

Using flexboxes there is no need to assign the absolute height and width to the flex containers. You can compute their size relatively to each other and it will display in that way on all type of screens.

Syntax to assign relative sizes to flex items

All the flex items have same size and they stretch (along the main axis) to fully utilize the size of container

flex: 1

Syntax to assign bigger size to a single flex item

This will double the size of second flex item as compared to other flex items and all the remaining flex items will have same size.

.class > div:nth-child(2) {
	flex: 2
}

Browser Compatibilities:

Flexbox is not supported in IE and Safari. They are available in newer versions of Firefox(18.0 -moz) and Opera(12.10) and Chrome(21.0 – webkit).