How to Use CSS Flexbox
By: Nikhil Swain
Tags: Flexbox, Css3, CSS, Programming, Front End Development

How to Use CSS Flexbox

No more floats or clearfixes

Flexbox

The Flexible Box Module, or Flexbox, is a one-dimensional layout model that helps us deal with space distribution in a very efficient way. Since it is one dimensional, it deals with layout one dimension at a time, i.e either a row or a column. In this article you will see all the useful properties of Flexbox that you can use in your stylesheet to make better designs.

Two axes

Flexbox has two axes: the Main axis and the Cross axis.

Main Axis and Cross Axis

The main axis is the default. Flexbox has two properties for the main axis, row and row-reverse. The row property is the default behaviour, running from the left of the screen to all the way to right. Row-reverse reverses the whole row, so the last element would be treated as the first element in reverse order.

Main Axis

The cross axis runs perpendicular to the main axis. Basically, in cross axis the main axis changes direction and runs from top to bottom. We can change the direction by using the property “flex-direction,” so all you have to do is set the parent element as flex and use the flex-direction and set the direction column or column-reverse.

Cross Axis

NOTE: If the main axis is set to row or row-reverse, then the cross axis runs along the columns. If the the main axis is set to column or column-reverse, then the cross axis runs along the rows.

Sub-Properties

Flexbox sub-properties give us more control over the flex items. These involve the growing, shrinking, and wrapping of the elements respective to their flex-container. (The parent element of the flex items/child elements that have the display property set to flex is referred to as the flex-container, or, in simple terms, a flex-container is an element that has the display of flex.) The sub-properties are:

flex-grow flex-shrink flex-wrap flex-basis

flex-grow

The flex-grow property makes the flex items grow along the main axis, and items will expand relatively to the space available on that axis. The interesting thing is that we can use this property in each individual item to make them expand differently as per the need.

HTML:

<div class="parent">

<div class="child child1"></div>

<div class="child child2"></div>

<div class="child child3"></div>

</div>

CSS:

.parent{

display: flex;

background: #f2f2f2;

} .child{

height: 100px;

width: 100px;

flex-grow: 1;

} .child1{background: #00FF66;}

.child2{background: #0094FF;}

.child3{background: #FF003D;}

Result of the above code

Having the flex-grow property set to 1 makes the children expand equally on the main axis. Let’s remove the flex-grow from the “ .child ” class and set it to to each individual child element.

.child {

height: 100px;

width: 100px;

}

.child1 {

background: #00FF66;

flex-grow: 1;

}

.child2 {

background: #0094FF;

flex-grow: 2;

}

.child3 {

background: #FF003D;

flex-grow: 3;

}

Result of the above code

NOTE: For clarification, a flex-grow property requires an integer. This specifies the growth of the items and not the order. So instead of giving the flex-grow of 1, 2, and 3 on child1, child2, and child3 respectively, we can also set it to 3, 5, 7 and it will still give the same result as above.

Some other examples are:

For the last one, the first two children have flex-grow set to 0. That means they will remain in their default size, which, in our case, is 100px.

flex-shrink

The flex-shrink property specifies the “flex-shrink factor” of a flex item. This one is the opposite of the flex-grow where an item shrinks down relative to the flex items if there is not enough space on the row.

<div class="wrapper">

<div class="parent">

<div class="child child1"></div>

<div class="child child2"></div>

<div class="child child3"></div>

</div>

</div> .wrapper{

width: 100%;

max-width: 960px;

}

.parent{

display: flex;

}



.child{

width: 320px;

height: 100px;

}

.child1{

background: #00FF66;

flex-shrink: 1;

}

.child2{

background: #0094FF;

flex-shrink: 2;

}

.child3{

background: #FF003D;

flex-shrink: 3;

}

Scale down the browser size to see the results.

Flex-shrink also requires a integer. Remember the greater the rate is set to the items, the smaller it will be in size compared to the others.

flex-wrap

The flex-wrap property specifies whether the flex items should wrap or not. Flex-wrap contains three different kind of values that can be set on it:

Wrap: wraps the flex items if necessary; Wrap-reverse: wraps the flex items if necessary in reverse order; and Nowrap: default value; specifies that the flex items will not wrap.

Consider an example where the flex-container has the width of 100% and each flex item of the flex-container is given equal amount of width, i.e. 33.33%. In this case the flex-wrap property will have no effect because the total combined width of the flex items is 99.99%, which is nearly equal to 100%, but if any of the flex items would have a larger width — say 34% as compared to others — then the item will wrap into a new line if the property is set to wrap or wrap-reverse.

.parent{

display: flex;

flex-wrap: wrap;

width: 100%;

}



.child{

width : 33.33%;

height: 100px;

}

.child1{

background: #00FF66;

}

.child2{

background: #0094FF;

}

.child3{

background: #FF003D;

width: 34%;

height: 100px;

}

Above example in visual format

flex-basis

The flex-basis property is somewhat similar to min-width; it specifies the starting width of a flex item. The only difference is that the element with min-width will sustain whatever the value it has, and if the screen goes smaller, then the browser will add a scrollbar to see the whole element. But in the case of flex-basis, the items will shrink normally as the flex items would.

.parent{

display: flex;

flex-wrap: wrap;

width: 100%;

}



.child{

flex-basis: 300px; /* change flex-basis to min-width and reduce the borwser size to see the difference */

height: 100px;

}

Observe the scrollbar at bottom on the left screen shot.

Shorthands

Flexbox has some sub-properties that are actually shorthand properties that you can use to ease your work.

The flex shorthand.

This is a shorthand for: flex-grow, flex-shrink, and flex-basis. The flex-shrink and flex-basis parameters are optional: That means you can use either the flex-shrink or the flex-basis parameter with the flex-grow while using flex.

Syntax:

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

Examples:

flex : 1 1 200px;

flex : 1 200px;

flex : 1 1;

flex : 0 1 400px;

The flex-flow shorthand

This is a shorthand for flex-direction and flex-wrap. You can use either one or both the parameters without caring about the order.

Syntax: flex-flow : flex-direction ||flex-wrap

Examples:

flex-flow: row-reverse wrap;

flex-flow: row wrap-reverse;

flex-flow: column;

flex-flow: wrap;

The Beauty of the Flexbox

My most favorite thing about Flexbox is the ability to align and justify flex items and also distribute space among them.

Align-items

As the name suggests, the align-items property controls the alignment of the flex items on the Cross axis.

Stretch is the default value where items get stretched to fit the flex-container.

Flex-start positions the items at the center of the flex-container.

Flex-end positions the items at the end of the flex-container.

Center positions the items at the center of the flex-container.

<div class="parent">

<div class="child child1">item 1</div>

<div class="child child2">item 2</div>

<div class="child child3">item 3 Curabitur aliquet quam id dui posuere blandit.</div>

</div> .parent{

width: 250px;

height: 200px;

border: 1px solid black;

display: flex;

align-items: center; /* put any value and observe */

} .child1 { background: #00FF66; }

.child2 { background: #0094FF; }

.child3 { background: #FF003D; }

align-items example

Justify-content

Justify-content aligns the flex items on the main axis and specifies the distribution of space between and around the items.

Flex-start is the default value that aligns items at the beginning of the main axis.

Flex-end positions the flex items at the end of the flex-container.

Center positions the flex items at the center of the flex-container.

Space-between distributes the available space between the flex items evenly inside the flex-container.

Space-around distributes items evenly, giving some space on both the ends.

Space-evenly distributes items evenly with equal space around them.

.parent{

width: 500px;

height: 200px;

border: 1px solid black;

display: flex;

justify-content: space-evenly; /* put different values and observe */

}

.child{

text-align: center;

line-height: 50px;

height: 50px;

width: 80px;

}