Loading...

Flexbox

You have read 0% of this section.

Flexbox allows us to create flexible, responsive layouts without using floats or positioning. Flexbox is one dimensional: it deals with one axis at a time (columns or rows). For two dimensional layouts, we’ll need to use tables or grids.

Get started

Add display: flex; or display: inline-flex; to your parent element.

.parent { 
  padding: 16px;
  display: flex;
}
&:nth-child(1)
&:nth-child(2)

Flex-direction

The flex-direction attribute sets the main axis of your flex container as well as the direction of items (normal or reversed). By default, flex items render in a row.

Update the flex direction
.parent { 
  padding: 16px;
  display: flex;
  flex-direction: row;
}
&:nth-child(1)
&:nth-child(2)
&:nth-child(3)

flex-direction: row;

Flex-wrap

The flex-wrap attribute sets the main axis of your flex container as well as the direction of items (normal or reversed). By default, flex items render in a row.

Update the flex direction
.parent { 
  padding: 16px;
  display: flex;
  flex-wrap: wrap; /* Default is nowrap */
}
&:nth-child(1)
&:nth-child(2)
&:nth-child(3)

flex-wrap: wrap;

Flex-flow

flex-flow is a shorthand for the flex-direction and flex-wrap properties.

.parent { 
  padding: 16px;
  display: flex;
  flex-flow: row wrap; /* Default is row nowrap */
}

Justify-content

The justify-content property sets the alignment of items on the main axis.

Update the flex direction
.parent { 
  padding: 16px;
  display: flex;
  flex-direction: row; /* Default is flex-start */
}
x

justify-content: flex-start;

Align-items

The align-items property is similar to justify-content, but it applies to the position of items on the cross-axis.

Update the flex direction
.parent { 
  padding: 16px;
  display: flex;
  align-items: flex-start; /* Default is stretch */
}
Placeholer text from catipsum
Cats go for world domination stare out the window if human is on laptop sit on the keyboard.
Pretend you want to go out but then don’t stare out cat door then go back inside carefully drink from water glass and then spill it everywhere

align-items: flex-start;

Understanding align-items: baseline;

To understand the baseline value, we need to understand how typography works. The “baseline” is the line upon which most letters “sit”. In the example below, note how all the letters sit on the same line, regardless of font size. Descenders extend below the baseline.

A
B
C
q

Align-content

The align-content property sets the distribution of space between and around content items along the container’s cross axis. It has no effect on single line flex containers so it won’t work with flex-wrap: nowrap;

Update the flex direction
.parent { 
  padding: 16px;
  display: flex;
  align-content: flex-start; /* Default is normal */
}
Placeholer text from catipsum
Cats go for world domination stare out the window if human is on laptop sit on the keyboard.
Pretend you want to go out but then don’t stare out cat door then go back inside carefully drink from water glass and then spill it everywhere

align-content: flex-start;

Align-self

We can override the align-items alignment for individual flex items, by adding align-selfto our child element.

Update the flex direction
.parent { 
  padding: 16px;
  display: flex;
  align-items: flex-start;
}

.child:nth-of-type(2) {
  align-self: flex-end;
}
&:nth-child(1)
&:nth-child(2)
&:nth-child(3)

align-self: flex-end;

Gap

To add space between flexbox items, use the colum-gap and row-gap properties, or the gap shorthand. Think of it as gutters for your rows and columns.

.parent { 
  padding: 16px;
  display: flex;
  row-gap: 24px;
  column-gap: 32px;
}
.parent { 
  padding: 16px;
  display: flex;
  gap: 24px 32px; /* row-gap column-gap */
}
32px
32px
32px
32px

gap: 32px;

Order

The order property controls the flex items’ order within the flex parent flow. It’s useful when you need to reorder items on a specific breakpoint.

.parent {
  @media (min-width: 600px) {
    .secondChild {
      order: 0; /* Default is 1 */
    }
            
    .firstChild {
      order: 1; /* Default is 0 */
    }
  }
}
Cats go for world domination stare out the window if human is on laptop sit on the keyboard.

Accessibility note

Using row-reverse or column-reverse will reverse the direction of the content visually, but the reading order will stay the same for screen readers. Make sure the order of your content in the HTML makes sense.

Flex

The flex shorthand sets how a flex item will grow or shrink to fit the available space. It’s a shorthand for flex-grow, flex-shrink, and flex-basis, and it can be specified using one, two, or all three values.

.parent { 
  padding: 16px;
  display: flex;
}

.child:nth-of-type(2) {
  /* Add to all items to 
  distribute the space equally */
  flex-grow: 1;
}
.parent { 
  padding: 16px;
  display: flex;
}

.child:nth-of-type(3) {
  flex-shrink: 2;
}
&:nth-child(1)
flex-grow: 1;
&:nth-child(3)
&:nth-child(1)
&:nth-child(2)
flex-shrink: 2;

Debugging flexbox

Some modern browsers like Chrome or Firefox have flexbox inspectors in the dev tools. Usually you can bring them up by clicking on the flexbox icon next to the display: flex; declaration. Why don’t you give them a try by centering this div?

flex-direction: row

flex-wrap: nowrap

align-content: normal

justify-content: normal

align-items: normal

&:nth-child(1)

Resources