Almost complete guide to flexbox (without flexbox)

如果遇到浏览器不给力,不兼容flex 怎么整???

网上搜到这么个文章,记录在此以便后用.
转载地址

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;
}

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;
}

• 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;
}

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 {
	display: table;
}

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

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%;
}

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;
}

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;
}