|| 原文地址:https://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox/
不幸的是,并不是每个人都有能够查看flexbox布局的浏览器/设备。这是一个cheatsheet风格的指南,提供了flexbox属性的向后兼容替代方案。
虽然本指南中的一些CSS看起来很明显,但我希望挑战flexbox的使用,并提供一些简单的解决方案来解决在它流行之前就存在的问题。
Displays items horizontally
.item {
display: inline-block;
}
Displays items horizontally in reverse order
.container {
direction: rtl;
}
.item {
display: inline-block;
}
Displays items vertically
.item {
display: block;
}
Displays items vertically in reverse order
.container, .item {
transform: scaleY(-1);
}
.item {
display: block;
}
Credit: Vincent Valentin
Squishes items to stop wrapping
.container {
display: table;
}
.item {
display: table-cell;
}
Wraps items when altogether wider than container
.item {
display: inline-block;
}
Wraps items in reverse order when altogether wider than container
.container, .item {
transform: scaleY(-1);
}
.item {
display: inline-block;
}
Horizontally aligns items to start of container
.item {
display: inline-block;
}
Horizontally aligns items to end of container
.container {
text-align: right;
}
.item {
display: inline-block;
}
Horizontally aligns items to center of container
.container {
text-align: center;
}
.item {
display: inline-block;
}
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
Spaces items with equidistant space
.container {
display: table;
}
.item {
display: table-cell;
text-align: center;
}
Vertically aligns items to start of container
.item {
display: inline-block;
}
Vertically aligns items to end of container
.container {
display: table;
}
.item {
display: table-cell;
vertical-align: bottom;
}
Vertically aligns items to center of container
.container {
display: table;
}
.item {
display: table-cell;
vertical-align: middle;
}
Vertically stretches items from start to end of container
.item {
display: inline-block;
height: 100%;
}
Vertically aligns items to start of container
.item {
display: inline-block;
}
Vertically aligns items to end of container
.container {
display: table-cell;
vertical-align: bottom;
}
.item {
display: inline-block;
}
Vertically aligns items to center of container
.container {
display: table-cell;
vertical-align: middle;
}
.item {
display: inline-block;
}
Grows an item to fill remaining space
.container {
display: table;
}
.item {
display: table-cell;
}
.item.grow {
width: 100%;
}
Shrinks an item and other items fill remaining space
.container {
display: table;
}
.item {
display: table-cell;
}
.item.shrink {
width: 1px;
}
Shrinks an item and other items fill remaining space
.container {
display: table;
}
.item {
display: table-cell;
}
.item.bottom {
vertical-align: bottom;
}