Introduction

Hello! Welcome to this simple guide to CSS Flexbox. This is by no means a comprehensive overview, but is instead intended to act as a quick reference to those learning the basics of Flexbox.

In the example below we have three block level elements inside of a flex container represented by the dotted border. They have no height or width properties, just 0.75em of padding. The container has the property of flex. This forces the block level elements to stack side by side.

When assigning the flex property to a parent element, you are assigning a Main Axis, to which it's children are flexed across and a Cross Axis that runs perpendicular.

Home

Search

Logout

Cross Axis

Main Axis

Flex Direction

By default the, flex-direction property is set to row. If you want to stack your elements vertically, set flex-direction to column

Doing this will also change the Main Axis form horizontal to vertical.

Home

Search

Logout

Main Axis

Cross Axis

              
.flex-container {
  display: flex;
  flex-direction: column; 
}

Justify Content

The justify-content property defines the distribution of elements along the Main Axis. The default option is flex-start, as depicted on the very first example at the top of this page. Setting the property to flex-end will push the element to the opposite end.

Other options include center, space-between, space-around, and space-evenly as shown below.

center

A

B

C

                  
.flex-container {
  display: flex;
  justify-content: center;
}

space-between

A

B

C

                  
.flex-container {
  display: flex;
  justify-content: space-between;
}

space-around

A

B

C

                  
.flex-container {
  display: flex;
  justify-content: space-around;
}

space-evenly

A

B

C

                  
.flex-container {
  display: flex;
  justify-content: space-evenly;
}

Align Items

Just as you justify content along the Main Axis, you can align items along the Cross Axis.

The default value for align-items is stretch. This means the elements will stretch to fill their parent flex container. In the following examples, a height property has been added to demonstrate this.

Other options include center, flex-start and flex-end.

Home

Search

Logout

Cross Axis

Main Axis

            
.flex-container {
  display: flex;
  height: 200px;
}

stretch

Home

Search

Logout

                
.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch; /* default */
}

center

Home

Search

Logout

                
.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}

flex-start

Home

Search

Logout

                
.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}

flex-end

Home

Search

Logout

                
.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}

Margin Auto

If you want to place some elements at either edge of the flex container, you can create a mixed arrangement by setting a margin value of auto on one of the flex elements.

Home

Search

Logout

            
.flex-container {
  display: flex;
  justify-content: flex-end;
}

.home {
  margin-right: auto;
}

A

B

C

1

2

            
.flex-container {
  display: flex;
  justify-content: flex-end;
}

.box1 {
  margin-left: auto;
}

Centering Content

To position your elements horizontally and vertically, you can use a combination of justify-content and align-items.

Here we set both properties to center.

Home

Search

Logout

Cross Axis

Main Axis

              
.flex-container {
  display: flex;
  height: 200px;
  justify-content: center;
  align-items: center;
}

Flex Wrap

By default, the flex-wrap property is set to nowrap. In the following examples, the flex elements are given widths that when added together, will exceed the size of their flex container.

If flex-wrap is not defined or has the property nowrap, their widths will be ignored. If the container is too small for the content or is reduced in size to the same effect, the elements will break from the flow of the document.

Choosing wrap will maintain the widths of the elements and force them onto a new line if they exceed their boundaries

A

B

C

D

E

            
.flex-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.flex-container > div {
  width: 130px;
}

Order

When using the flex-direction property it is possible to reverse the order of the elements by choosing either row-reverse or column-reverse.

It is also possible to re-order specific elements with the order property. By default, every element has an order of 0. If you assign a higher number, that element will be pushed to the back. The higher the number, the further back it will go. Similarly, if you assign a negative number, it will pushed to the front. The lower the number, the further forward it will go.

A

B

C

            
.flex-container {
  display: flex;
  flex-direction: row-reverse;
}

.flex-container > div {
  width: 56px;
}

A

B

C

D

E

            
.flex-container {
  display: flex;
}

.flex-container > div {
  width: 56px;
}

.box-A {
  order: 1;
}

.box-E {
  order: -1;
}

Flex Basis

It is important to remember that flex-grow and flex-shrink are not a measure of size or a fractional proportion. They are a measure of the rate at which the element will grow or shrink.

To set an initial size we can use flex-basis. This property will define what an element can grow or shrink into based on it's container and when used in conjunction with flex-grow and/or flex-shrink.

Home

Search

Logout

            
.flex-container {
  display: flex;
}

.flex-example > div {
  flex-basis: 250px;
}

Flex Grow

The flex-grow property defines the factor at which an element will grow to fill any available space in it's parent container.

In this example, no widths have been defined. Both the home and search elements have flex-grow properties forcing them to expand. Resize the browser to see them adjust to fill the available space.

Home

Search

Logout

            
.flex-container {
  display: flex;
}

.home {
  flex-grow: 2;
}

.search {
  flex-grow: 1;
}

Flex Shrink

The flex-shrink property defines the factor at which an element will shrink if the total size of the elements exceed their container's size.

In this example, the first box has a flex-shrink property, pushing it to the smallest possible size.

Home

Search

            
.flex-container {
  display: flex;
}

.home {
  flex-shrink: 1;
}

.search {
  width: 200px;
}

Shorthand

We can combine flex-grow, flex-shrink and flex-basis with the shorthand property called flex.

flex: 1; ...is shorthand for...

flex: 1 1 0; ...which is shorthand for..

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;

In the example below, the first box has a flex-grow property of 1, a flex-shrink property of 0 and a flex-basis of 200px. It will grow but not shrink beyond 200px.

The second box has a flex-grow property of 10, a flex-shrink property of 1 and a flex-basis of 0px. At smaller browser sizes it will shrink to fit, but when the browser size increases, it will grow rapidly, exceeding the size of the first box when given room.

Home

Search

            
.flex-container {
  display: flex;
}

.home {
  flex: 1 0 200px;
}

.search {
  flex: 10 1 0px;
}