Almost complete guide to CSS flexbox (without flexbox)

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

row

Displays items horizontally

.item {
	display: inline-block;
}

row-reverse

Displays items horizontally in reverse order

.container {
	direction: rtl;
}

.item {
	display: inline-block;
}

column

Displays items vertically

.item {
	display: block;
}

column-reverse

Displays items vertically in reverse order

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

.item {
	display: block;
}

2. flex-wrap

nowrap

Squishes items to stop wrapping

.container {
	display: table;
}

.item {
	display: table-cell;
}

wrap

Wraps items when altogether wider than container

.item {
	display: inline-block;
}

3. justify-content

flex-start

Horizontally aligns items to start of container

.item {
	display: inline-block;
}

flex-end

Horizontally aligns items to end of container

.container {
	text-align: right;
}

.item {
	display: inline-block;
}

center

Horizontally aligns items to center of container

.container {
	text-align: center;
}

.item {
	display: inline-block;
}

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

space-around

Spaces items with equidistant space

.container {
	text-align: table;
}

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

4. align-items

flex-start

Vertically aligns items to start of container

.item {
	display: inline-block;
}

flex-end

Vertically aligns items to end of container

.container {
	display: table;
}

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

center

Vertically aligns items to center of container

.container {
	display: table;
}

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

stretch

Vertically stretches items from start to end of container

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

5. align-content

flex-start

Vertically aligns items to start of container

.item {
	display: inline-block;
}

flex-end

Vertically aligns items to end of container

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

.item {
	display: inline-block;
}

center

Vertically aligns items to center of container

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

.item {
	display: inline-block;
}

6. flex items

flex-grow

Grows an item to fill remaining space

.container {
	display: table;
}

.item {
	display: table-cell;
}

.item.grow {
	width: 100%;
}

flex-shrink

Shrinks an item and other items fill remaining space

.container {
	display: table;
}

.item {
	display: table-cell;
}

.item.shrink {
	width: 1px;
}

align-self

Vertically aligns an item (bottom in this example)

.container {
	display: table;
}

.item {
	display: table-cell;
}

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


Original URL: http://feedproxy.google.com/~r/feedsapi/BwPx/~3/kVehXdLXxlg/almost-complete-guide-to-flexbox-without-flexbox

Original article

Comments are closed.

Proudly powered by WordPress | Theme: Baskerville 2 by Anders Noren.

Up ↑

%d bloggers like this: