Найлегший спосіб створити бічні колонки однакової висоти

15

Від автора: Дуже тривалий час ми були змушені створювати інтерфейси для наших веб-додатків, застосовуючи СЅЅ техніки, які спочатку задумувалися для верстки друкованих документів. Не дивно, що їх використання викликає стільки труднощів у новачків! На щастя, часи змінюються. Тепер у нас є модуль Flexbox. Якщо ви можете дозволити собі не піклуватися про підтримку в браузерах IE < 10 (а це велике «якщо»), то ви можете використовувати Flexbox вже сьогодні! Специфікація є завершеною, і майже всі браузери підтримують даний модуль без необхідності застосування вендорних префіксів.

Найлегший спосіб створити бічні колонки однакової висотиНайлегший спосіб створити бічні колонки однакової висоти

У цій невеликій навчальної статті я покажу, як використовувати flexbox, щоб створити щось базове, що раніше викликало утруднення. І це щось називається бічна колонка (sidebar), який при цьому має однакову висоту з вашим основним контентом. Основна складність полягає в тому, щоб об’єм вмісту в основному блоці і бічній колонці міг змінюватися, але при цьому дані блоки залишалися б однакової висоти. З flexbox це дуже легко зробити. Ось як це робиться.

Скажіть «Привіт, Flexbox»

В Інтернеті можна знайти безліч посібників, в яких розглядається flexbox. У цій статті ми підійдемо до розгляду flexbox з практичної точки зору, тобто відразу ж перейдемо до його використання. Спочатку створимо HTML розмітку:

Нам потрібно, щоб блоки #main div і aside розташовувалися поруч один з одним і були однакової висоти, незалежно від обсягу вмісту, яке в них знаходиться. Нам також хотілося б, щоб сторінка була чуйною, тобто щоб у бічній колонки була фіксована ширина, а основний блок з контентом міг стискатися/розширюватися для заповнення доступного простору. І, нарешті, на пристроях з маленьким екраном бічна колонка повинна переміщатися під основний блок з контентом.

Найлегший спосіб створити бічні колонки однакової висоти

Ось, як це можна зробити. Для початку активуємо модуль flexbox:

#page {
display:flex;
}

Завдяки цьому елемент #page стає flex-контейнером (тобто «гумовим»). Він буде відображатися, як блочний елемент (тобто буде розтягуватися на всю ширину сторінки), а всі елементи, що є дочірніми по відношенню до нього, перетворяться в flex-елементи. Це дуже важливий момент, тому що нам потрібно, щоб основний блок з контентом і бічна колонка розтягувалися на всю висоту сторінки.

Але ми також поставимо максимальну ширину 1200 px для елемента #page і отцентрируем його. Оскільки це звичайний блоковий елемент, то можна написати так:

#page {
display:flex;
/* Центрування сторінки */
max-width:1200 px;
margin:0 auto;
}

Чудово! Тепер нам потрібно задати ширину елемента #main і бічної колонки:

#main {
/* Це змусить елемент розтягуватися і зайняти увесь доступний простір, зайняте бічній колонкою */
flex-grow:1;
}
aside {
/* Задаємо для бічної колонки ширину за замовчуванням і запобігаємо її стиснення */
flex-shrink:0;
width:280px;
}

Готово! Ми майже закінчили. Коли елемент #main буде розтягуватися за рахунок збільшення вмісту, він буде розтягувати і елемент #page, з-за чого згодом розтягнеться і елемент aside (і навпаки). Останнє, що нам залишилося зробити, це розташувати бічну колонку під основним блоком з контентом на пристроях з маленьким екраном. Для цього нам знадобиться простий медіа-запит:

@all media and (max-width: 800px) {
#page {
flex-flow:column;
}
/* Змушує бічну колонку розтягуватися на всю ширину екрану */
aside {
width:auto;
}
}

За замовчуванням для flex-контейнерів встановлено значення row властивості flex-flow, яка дозволяє розташувати елементи поруч один з одним. На маленьких екранах ми перемикаємося на вертикальну орієнтацію, що змушує бічну колонку переміститися під основний блок з контентом.

Для стислості я пропустив частину CSS коду, не впливає на розмітку. Але ви можете подивитися всі стилі, завантаживши исходники до даної статті. Також варто згадати, що я не розповів про альтернативні варіанти для роботи з flexbox в IE 10, для якого використовується трохи застаріла версія специфікації flexbox, тобто мій приклад буде працювати тільки в браузерах Firefox, Chrome, Safari, Opera і IE 11.

Ось наша бічна колонка і готова!

Висновок

Вам належить ще багато чого дізнатися про flexbox, але я сподіваюся, що ця стаття дасть вам «швидкий старт». Безумовно, модуль Flexbox не є єдиним рішенням для створення подібної розмітки сторінки, але це за ним стоїть майбутнє розробки веб-інтерфейсів. Якщо вам не потрібна підтримка старих версій IE, то ви можете користуватися ним уже зараз.