CSS Flexbox Layout

This CSS Flexbox cheatsheet covers essential properties for building flexible layouts. Each property and value has a code example, along with a demonstration image for visual reference.

display

The display property enables Flexbox on an element.

</>
Copy
display: flex;

flex-direction

Defines the main axis direction of the flex container.

row – Items align horizontally, from left to right (default).

</>
Copy
flex-direction: row;
Flexbox Cheatsheet: flex-direction: row;

row-reverse – Items align horizontally, from right to left.

</>
Copy
flex-direction: row-reverse;
flex-direction: row-reverse;

column – Items align vertically, from top to bottom.

</>
Copy
flex-direction: column;
flex-direction: column;

column-reverse – Items align vertically, from bottom to top.

</>
Copy
flex-direction: column-reverse;
flex-direction: column-reverse;

justify-content

Aligns flex items along the main axis.

flex-start – Items align to the start of the main axis.

</>
Copy
justify-content: flex-start;
justify-content: flex-start;

flex-end – Items align to the end of the main axis.

</>
Copy
justify-content: flex-end;
justify-content: flex-end;

center – Items are centered along the main axis.

</>
Copy
justify-content: center;
justify-content: center;

space-between – Space is distributed evenly between items.

</>
Copy
justify-content: space-between;
justify-content: space-between;

space-around – Space is distributed evenly around items.

</>
Copy
justify-content: space-around;
justify-content: space-around;

align-items

Aligns items along the cross axis.

stretch – Items stretch to fill the container (default).

</>
Copy
align-items: stretch;
align-items: stretch;
align-items: stretch;

flex-start – Items align to the start of the cross axis.

</>
Copy
align-items: flex-start;
align-items: flex-start;
align-items: flex-start;

flex-end – Items align to the end of the cross axis.

</>
Copy
align-items: flex-end;
align-items: flex-end;
align-items: flex-end;

center – Items are centered along the cross axis.

</>
Copy
align-items: center;
align-items: center;
align-items: center;

flex-wrap

Specifies if flex items should wrap onto multiple lines.

nowrap – Items stay on a single line (default).

</>
Copy
flex-wrap: nowrap;
flex-wrap: nowrap;

wrap – Items wrap onto multiple lines.

</>
Copy
flex-wrap: wrap;
flex-wrap: wrap;

wrap-reverse – Items wrap onto multiple lines in reverse order.

</>
Copy
flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;

align-content

Aligns flex lines along the cross axis when there is extra space in the container.

Note: align-items should be set to either wrap or wrap-reverse.

flex-start – Lines align to the start of the cross axis.

</>
Copy
align-content: flex-start;
align-content: flex-start;

flex-end – Lines align to the end of the cross axis.

</>
Copy
align-content: flex-end;
align-content: flex-end;

center – Lines are centered along the cross axis.

</>
Copy
align-content: center;
align-content: center;

space-between – Space is distributed evenly between lines.

</>
Copy
align-content: space-between;
align-content: space-between;

space-around – Space is distributed evenly around lines.

</>
Copy
align-content: space-around;
align-content: space-around;

flex-grow

Specifies the growth factor of a flex item relative to others.

</>
Copy
flex-grow: 2;
flex-grow

flex-shrink

Specifies how a flex item will shrink relative to others if space is limited.

</>
Copy
flex-shrink: 0;

flex-basis

Defines the initial size of a flex item before space distribution.

</>
Copy
flex-basis: 200px;

order

Controls the order of flex items within a container.

</>
Copy
order: 1;
</>
Copy
  <div class="flex-container">
    <div class="flex-item flex-item-1" style="order:1">order 1</div>
    <div class="flex-item flex-item-1" style="order:2">order 2</div>
    <div class="flex-item flex-item-1" style="order:1">order 1</div>
  </div>