Kenan Yusuf

Cover Image for Almost complete guide to flexbox (without flexbox)

Almost complete guide to flexbox (without flexbox)

69 Comments

Unfortunately, not everyone has a browser/device capable of viewing flexbox layouts. This is a cheatsheet-esque guide that offers backwards compatible alternatives to flexbox properties.

Whilst some of the CSS in this guide may seem obvious, I am looking to challenge the use of flexbox as well as provide simple solutions to problems were around before it became popular.

flex-direction

row

Displays items horizontally

Example of flex-direction's row value

.item {
  display: inline-block;
}

row-reverse

Displays items horizontally in reverse order

Example of flex-direction's row-reverse value

.container {
  direction: rtl;
}

.item {
  display: inline-block;
}

column

Displays items vertically

Example of flex-direction's column value

.item {
  display: block;
}

column-reverse

Displays items vertically in reverse order

Example of flex-direction's column-reverse value

.container,
.item {
  transform: scaleY(-1);
}

.item {
  display: block;
}

Credit: Vincent Valentin

flex-wrap

nowrap

Squishes items to stop wrapping

Example of flex-wrap's nowrap value

.container {
  display: table;
}

.item {
  display: table-cell;
}

wrap

Wraps items when altogether wider than container

Example of flex-wrap's wrap value

.item {
  display: inline-block;
}

wrap-reverse

Wraps items in reverse order when altogether wider than container

Example of flex-wrap's wrap-reverse value

.container,
.item {
  transform: scaleY(-1);
}

.item {
  display: inline-block;
}

justify-content

flex-start

Horizontally aligns items to start of container

Example of justify-content's flex-start value

.item {
  display: inline-block;
}

flex-end

Horizontally aligns items to end of container

Example of justify-content's flex-end value

.container {
  text-align: right;
}

.item {
  display: inline-block;
}

center

Horizontally aligns items to center of container

Example of justify-content's center value

.container {
  text-align: center;
}

.item {
  display: inline-block;
}

space-between

Spaces items between start and end of container

Example of justify-content's space-between value

.container {
  text-align: justify;
}

.container:after {
  content: "";
  display: inline-block;
  width: 100%;
}

.item {
  display: inline-block;
}

Note: This method only works with uncompressed HTML and requires a fixed height on the container

space-around

Spaces items with equidistant space

Example of justify-content's space-around value

.container {
  display: table;
}

.item {
  display: table-cell;
  text-align: center;
}

align-items

flex-start

Vertically aligns items to start of container

Example of align-items flex-start value

.item {
  display: inline-block;
}

flex-end

Vertically aligns items to end of container

Example of align-items flex-end value

.container {
  display: table;
}

.item {
  display: table-cell;
  vertical-align: bottom;
}

center

Vertically aligns items to center of container

Example of align-items center value

.container {
  display: table;
}

.item {
  display: table-cell;
  vertical-align: middle;
}

stretch

Vertically stretches items from start to end of container

Example of align-items stretch value

.item {
  display: inline-block;
  height: 100%;
}

align-content

flex-start

Vertically aligns items to start of container

Example of align-content's flex-start value

.item {
  display: inline-block;
}

flex-end

Vertically aligns items to end of container

Example of align-content's flex-end value

.container {
  display: table-cell;
  vertical-align: bottom;
}

.item {
  display: inline-block;
}

center

Vertically aligns items to center of container

Example of align-content's center value

.container {
  display: table-cell;
  vertical-align: middle;
}

.item {
  display: inline-block;
}

flex items

flex-grow

Grows an item to fill remaining space

Example of the flex-grow property

.container {
  display: table;
}

.item {
  display: table-cell;
}

.item.grow {
  width: 100%;
}

flex-shrink

Shrinks an item and other items fill remaining space

Example of the flex-shrink property

.container {
  display: table;
}

.item {
  display: table-cell;
}

.item.shrink {
  width: 1px;
}

align-self

Shrinks an item and other items fill remaining space

Example of the align-self property

.container {
  display: table;
}

.item {
  display: table-cell;
}

.item.bottom {
  vertical-align: bottom;
}