Kenan Yusuf

Almost complete guide to flexbox (without flexbox)

28th March 2016
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.

  1. flex-direction
  2. flex-wrap
  3. justify-content
  4. align-items
  5. align-content
  6. flex items

1. flex-direction

1
2
3

row

Displays items horizontally

.item {
	display: inline-block;
}
1
2
3

row-reverse

Displays items horizontally in reverse order

.container {
	direction: rtl;
}

.item {
	display: inline-block;
}
1
2
3

column

Displays items vertically

.item {
	display: block;
}
1
2
3

column-reverse

Displays items vertically in reverse order

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

.item {
	display: block;
}
Credit: Vincent Valentin

2. flex-wrap

1
2
3
4

nowrap

Squishes items to stop wrapping

.container {
	display: table;
}

.item {
	display: table-cell;
}
1
2
3
4
5

wrap

Wraps items when altogether wider than container

.item {
	display: inline-block;
}
1
2
3
4
5

wrap-reverse

Wraps items in reverse order when altogether wider than container

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

.item {
	display: inline-block;
}

3. justify-content

1
2
3

flex-start

Horizontally aligns items to start of container

.item {
	display: inline-block;
}
1
2
3

flex-end

Horizontally aligns items to end of container

.container {
	text-align: right;
}

.item {
	display: inline-block;
}
1
2
3

center

Horizontally aligns items to center of container

.container {
	text-align: center;
}

.item {
	display: inline-block;
}
1
2
3

space-between

Spaces items between start and end of container

.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
1
2
3

space-around

Spaces items with equidistant space

.container {
	display: table;
}

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

4. align-items

1
2
3

flex-start

Vertically aligns items to start of container

.item {
	display: inline-block;
}
1
2
3

flex-end

Vertically aligns items to end of container

.container {
	display: table;
}

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

center

Vertically aligns items to center of container

.container {
	display: table;
}

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

stretch

Vertically stretches items from start to end of container

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

5. align-content

1
2
3
4
5

flex-start

Vertically aligns items to start of container

.item {
	display: inline-block;
}
1
2
3
4
5

flex-end

Vertically aligns items to end of container

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

.item {
	display: inline-block;
}
1
2
3
4
5

center

Vertically aligns items to center of container

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

.item {
	display: inline-block;
}

6. flex items

1
2
3

flex-grow

Grows an item to fill remaining space

.container {
	display: table;
}

.item {
	display: table-cell;
}

.item.grow {
	width: 100%;
}
1
2
3

flex-shrink

Shrinks an item and other items fill remaining space

.container {
	display: table;
}

.item {
	display: table-cell;
}

.item.shrink {
	width: 1px;
}
1
2
3

align-self

Vertically aligns an item (bottom in this example)

.container {
	display: table;
}

.item {
	display: table-cell;
}

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