К сожалению, не у всех есть браузер/устройство, поддерживающие flexbox. Это руководство в виде шпаргалки, в котором предлагаются альтернативы обратной совместимости для свойств flexbox.
Хотя некоторый CSS-код в этом руководстве, возможно, покажется очевидным, я собираюсь бросить вызов flexbox, а также предложить простые решения проблем, которые возникали, пока он не обрёл популярность.
.item {
display: inline-block;
}
.container {
direction: rtl;
}
.item {
display: inline-block;
}
.item {
display: block;
}
.container, .item {
transform: scaleY(-1);
-ms-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
}
.item {
display: block;
}
.container {
display: table;
}
.item {
display: table-cell;
}
.item {
display: inline-block;
}
.item {
display: inline-block;
}
.container {
text-align: right;
}
.item {
display: inline-block;
}
.container {
text-align: center;
}
.item {
display: inline-block;
}
.container {
text-align: justify;
}
.container:after {
content: '';
display: inline-block;
width: 100%;
}
.item {
display: inline-block;
}
Примечание: этот метод работает только с несжатым HTML и требует фиксированную высоту у контейнера.
.container {
display: table;
}
.item {
display: table-cell;
text-align: center;
}
.item {
display: table-cell;
}
.container {
display: table;
}
.item {
display: table-cell;
vertical-align: bottom;
}
.container {
display: table;
}
.item {
display: table-cell;
vertical-align: middle;
}
.item {
display: inline-block;
height: 100%;
}
.item {
display: inline-block;
}
.container {
display: table-cell;
vertical-align: bottom;
}
.item {
display: inline-block;
}
.container {
display: table-cell;
vertical-align: middle;
}
.item {
display: inline-block;
}
.container {
display: table;
}
.item {
display: table-cell;
}
.item.grow {
width: 100%;
}
.container {
display: table;
}
.item {
display: table-cell;
}
.item.shrink {
width: 1px;
}
.container {
display: table;
}
.item {
display: table-cell;
}
.item.bottom {
vertical-align: bottom;
}
К сожалению, не доступен сервер mySQL