Little Known
CSS Basics Flexbox

Flexbox: The Container

display: flex

This element will use the flexible box layout method to size all its children.

display: inline-flex

block : inline-block :: flex : inline-flex

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-content
• align-items

flex-direction

Set the main axis that flex properties work along

• row — horizontal
• column — vertical
• row-reverse
• column-reverse

flex-wrap

Allow children to wrap inside the flex container

• nowrap
• wrap
• wrap-reverse

flex-flow

Shorthand for flex-direction & flex-wrap

• row wrap
• column wrap-reverse
• row-reverse nowrap

justify-content

Distributes children along the main axis of the flex container

• start
• end
• center
• left
• right

justify-content

Distributes children along the main axis of the flex container

• baseline
• first baseline
• last baseline

justify-content

Distributes children along the main axis of the flex container

• space-between
• space-around
• space-evenly
• stretch

justify-content

Distributes children along the main axis of the flex container

• safe
• unsafe

align-content

Distributes children along the cross axis of the flex container

• start
• end
• center

align-content

Distributes children along the cross axis of the flex container

• baseline
• first baseline
• last baseline

align-content

Distributes children along the cross axis of the flex container

• space-between
• space-around
• space-evenly
• stretch

align-content

Distributes children along the cross axis of the flex container

• safe
• unsafe

align-items

Aligns children on the cross axis of the flex container

• start
• end
• center
• self-start
• self-end

align-items

Aligns children on the cross axis of the flex container

• baseline
• first baseline
• last baseline

align-items

Aligns children on the cross axis of the flex container

• space-between
• space-around
• space-evenly
• stretch

align-items

Aligns children on the cross axis of the flex container

• safe
• unsafe

Flexbox: The Children

• flex-grow
• flex-shrink
• flex-basis
• order
• align-self

flex-grow

How much of the extra space on the main axis the element is allowed to take up

Relative to flex-grow of siblings

Values: integer

flex-shrink

How much of the necessary shrinking on the main axis the element must do

Relative to flex-shrink of siblings

Values: integer

flex-basis

How much space on the main axis the element takes up before growing or shrinking

Values: length

auto means the element’s width

flex

Shorthand:

grow shrink basis

order

Change the element’s location along the main axis

Relative to order of all siblings

align-self

Allows the element to override its parent’s align-items value

Value: any align-items value

Use Cases

Perfect Centering

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

Perfect Centering

Global Grid Layout

.parent {
  display: flex;
  justify-content: space-between;
}
.child {
  /* 3 columns, 20px gap */
  width: calc(33% - (20px * 2 / 3));
}

Global Grid Layout

Equal-Height Grids

.parent {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}
.child {
  /* 3 columns, 20px gap */
  width: calc(33% - (20px * 2 / 3));
}

Equal-Height Grids

Other Flexbox Use Cases

Flexbox vs. Grid

Flexbox is 1-dimensional: it sets a main axis and provides controls for positioning elements along that axis.

Grid is 2-dimensional: it sets both block and inline axes and provides controls for positioning elements along either/both axes.