Розташування блоків з допомогою display:table

2

Від автора: займаючись адаптивним дизайном, нам часто хочеться змінити порядок розташування певних елементів, переміщаючи те, що знаходиться зліва під основний текст, який потрібно перенести вгору. Flexbox від CSS3 може зробити це для нас, але є більш швидкий, хоча і більш брудний спосіб, який можна застосувати зараз.

Я кажу «зараз», хоча, звичайно, зараз ми можемо використовувати і Flexbox, але виконання різниться в залежності від браузера, як і необхідний синтаксис. Кріс Міллс (Chris Mills), що працює для Opera, написав дві чудові глибокі статті (Основи Flexbox (Flexbox basics) і Просунутий кросбраузерність flexbox (Advanced cross-browser flexbox) про різні особливості цього модуля.

Звичайно, Flexbox пропонує більше, ніж просто переміщення елементів, але якщо вам потрібно тільки це, то далі властивості CSS display можна не дивитися.

(Між іншим, ця ідея заснована на тому, про що говорив нам Брюс Лоусон (Bruce Lawson) на beyondtellerand 2012)

Давайте візьмемо чотири блоки, чий простий HTML промаркований наступним чином:

Box One
Box Two
Box Three
Box Four

І чиї стилі точно так само прості:

.boxes {
width:50%;
margin:0 auto;
}
.box {
display:inline-block;
width:24%;
height:15em;
text-align:center;
line-height:15em;
color:#fff;
}
.one { background:#333; }
.two {
background:#fff;
color:#333;
}
.three { background:#aaa; }
.four { background:#dc002e; }

Змінити порядок цих блоків в медиазапросе можна легко, скажімо, при 48em (768px), скориставшись перевагою display:table. Для наочності ми покладемо блок номер три наверх, за ним підуть блоки чотири, два і потім один.

Насамперед потрібно встановити містить елемент, .boxes, як display:table.

Потім встановлюємо елемент, який потрібен нам вгорі, блок номер три, як display:table-caption.

Щоб пересунути елемент вниз, в даному випадку блок номер один, встановлюємо display:table-footer-group.

І нарешті, щоб зрушити елемент догори, але не на самий верх, встановлюємо блок номер чотири на display:table-header-group.

/* 768px */
@media only screen and (max-width:48em) {
.boxes {
display:table;
width:100%;
}
.box {
display:block;
width:100%;
}
.three { display:table-caption; }
.four { display:table-header-group; }
.one { display:table-footer-group; }
}

Якщо ви зміните розмір свого браузера, то зможете подивитися цей простий демо-приклад в дії.

Я знаю, що прихильникам чистого коду, можливо, це здасться огидним, але зазначу, що застосовував це в продуктивному коді просто тому, що він працює, і створює набагато менше перешкод, ніж численні втілення Flexbox. Цей метод кросбраузерність – аж до Internet Explorer 8.

У такого рішення, якщо можна його так назвати, також є свої обмеження, так як у вас немає можливості точного налаштування переміщення великої кількості елементів, яку вам забезпечить Flexbox, але для декількох елементів воно працює добре, що видно з демо-прикладу.