Довгий час ми були змушені створювати інтерфейси наших веб-додатків з використанням CSS макетів, які спочатку були призначені для горизонтального розміщення елементів. Не дивно, що це велика проблема для початківців! На щастя, ситуація змінюється - тепер у нас є flexbox. Якщо ви можете дозволити собі ігнорувати IE < 10, то почніть використовувати його прямо сьогодні! Більшість браузерів вже підтримують його без префіксів.
У цій короткій статті, я покажу вам, як використовувати flexbox для створення базових речей - бічної панелі, яка має однакову висоту з вашим основним вмістом. Хитрість полягає в тому, що ви хочете, щоб бічна панель і елемент головної сторінки мали вміст різної довжини, але в той же час були однакової висоти. З flexbox, це дуже легко. Ось, як це зробити.
Привіт, Flexbox!
Є багато детальних гідів по flexbox. Ми скористаємось більш практичним підходом і перейдемо прямо до використання. По-перше, ось HTML:
<section id="page">
<div>
</div>
<aside>
</aside>
Ми хочемо зробити так, щоб #main і aside були однакової висоти, незалежно
від змісту. Ми також хочемо зробити сторінку адаптивною, щоб бічна панель мала
фіксовану ширину, але головний елемент стискався/розширювався, заповнюючи весь
доступний простір. Нарешті, на маленьких екранах, нам потрібно, щоб сайдбар
був під основним контентом.
Ось, як це зробити. Спершу, активуємо flexbox:
#page {
display:flex;
}
Це перетворить #page елемент в контейнер flex. Він буде відображатися як
блок елемент (займе всю ширину сторінки). Також, це перетворить всі елементи
всередині нього у flex елементи. Це важливо - нам потрібно, щоб main і sidebar
були flex елементами, тому вони займуть всю висоту сторінки.
Але ми також хочемо, щоб #page був 1200 px завширшки (як максимум) і
знаходився по центру. Це звичайний блок елемент, тому ми можемо центрувати
його так:
#page {
display:flex;
/* Центруємо сторінку */
max-width:1200px;
margin:0 auto;
}
Відмінно! Тепер ми повинні встановити ширину для #main і боковій панелі:
#main {
/* Елемент збільшується і займає увесь доступний простір, не зайнятий сайдбаром */
flex-grow:1;
}
aside {
/* Встановлюємо ширину сайдбару за замовчуванням і запобігаємо його стисненню */
flex-shrink:0;
width:280px;
}
Зроблено! Наш макет практично готовий. Коли вміст #main стає більше, це
збільшує #page, яка в свою чергу буде збільшувати сайдбар (і навпаки).
Останнє, що потрібно зробити, це налаштувати бічну панель для маленьких
екранів, що може бути зроблено за допомогою простих медіа-запитів:
@media all and (max-width: 800px) {
#page {
flex-flow:column;
}
/* Робимо так, щоб сайдбар займав всю ширину екрану */
aside {
width:auto;
}
}
За замовчуванням, flex контейнери мають значення flex-flow рядка , тож
елементи відображаються side-by-side. На маленьких екранах ми перемикаємо його
на вертикальну орієнтацію, яка штовхає на бічну панель нижче основного вмісту.
Я опустив деякі стилі, які не відносяться до макету для стислості. Варто зазначити, що в цьому прикладі не забезпечена підтримка IE 10, яка реалізується більш старою версією flexbox. Все гарно працює в Firefox, Chrome, Safari, Opera і IE 11.
Flexbox - це аж ніяк не єдиний спосіб створити цей макет, але це шлях вперед для побудови веб-інтерфейсів. Якщо ви можете дозволити собі відмовитися від підтримки старих IE, ви можете використовувати його вже сьогодні.
Ще немає коментарів