Від автора: у цій статті вам не потрібно знати всі тонкощі Flexbox, щоб приступити до створення макета новинного сайту. У процесі створення новинного сайту ми дізнаємося про кілька функцій Flexbox, які можна зустріти на сайті Guardian.
Ми використовуємо Flexbox, тому що це дуже потужний інструмент:
В ньому можна запросто створювати адаптивні колонки
Колонки можна робити однакової висоти
Контент в контейнері можна притискати до нижньої межі
Поїхали!
Почнемо з двох колонок
Колонки в CSS завжди викликали ряд труднощів. Дуже довгий час нам доводилося працювати або з обтеканиями, або з таблицями, однак у обох варіантів є свої недоліки. Flexbox полегшує процес створення колонок, і ми одержуємо:
Чистий код: потрібно додати всього один контейнер зі властивість display: flex
Не потрібно скидати обтікання, щоб не виникло непередбачених проблем з макетом
Семантична розмітка
Гнучкість: парою рядків CSS ми можемо змінювати розмір, розтягувати, вирівнювати колонки і т. д.
Почнемо з створення двох колонок; Перша буде займати 2/3 ширини контейнера, а друга 1/3.
Нам знадобляться два елемента:
Контейнер columns
Дочірні елементи column. У одного буде додатковий клас main-column, який ми будемо використовувати для розширення колонки
.columns {
display: flex;
}
.column {
flex: 1;
}
.main-column {
flex: 2;
}
Головною колонці задано flex значення 2, колонка буде займати в 2 рази більше місця, ніж інші. Додавши трохи стилів, ми отримаємо ось це:
Зробимо колонки флекс контейнерами
У колонках будуть йти статті, розташовані одна під одною, тому нам потрібно наші колонки column перетворити на флекс контейнери. Нам потрібно, щоб:
Статті розташовувалися вертикально
Статті розтягувалися і заповнювали весь вільний простір
.column {
display: flex;
flex-direction: column; /* Makes the articles stacked vertically */
}
.article {
flex: 1; /* Stretches the articles to fill up the remaining space */
}
Якщо контейнера задати властивість flex-direction: column, а у дочірніх елементів прописати flex: 1, статті будуть займати все вертикальне простір, зберігаючи рівну ширину колонок.
Перетворимо кожну статті під флекс контейнер
Зробимо наш код ще більш гнучким, давайте перетворимо статті під флекс контейнери. У кожній статті:
Заголовок
Параграф
Панель з інформацією про автора і кількості коментарів
Опціональне адаптивне зображення
У статтях нам потрібен Flexbox для того, щоб притиснути смужку з мета-даними до нижньої частини блоку. Ось такий макет статті ми сьогодні створимо:
.article {
display: flex;
flex-direction: column;
flex-basis: auto; /* задає початковий розмір елемента в залежності від контенту */
}
.article-body {
display: flex;
flex: 1;
flex-direction: column;
}
.article-content {
flex: 1; /* Так контент буде займати весь вільний простір, зрушуючи смужку з інформацією про автора і коментарях вниз */
}
Завдяки властивості flex-direction: column, статті розташовуються у вертикальному положенні. До елементу article-content застосовується властивість flex: 1, з-за чого заповнюється порожній простір, зрушуючи article-info до нижньої частини блоку. Висота колонки не має значення.
Додамо кілька вкладених колонок
Зліва нам необхідно додати кілька колонок. Тому необхідно замінити другу статтю на такій же контейнер columns.
Вкладена колонка повинна бути ширше за інших, тому їй необхідно задати властивість nested-column і додаткові стилі:
.nested-column {
flex: 2;
}
Перша колонка стала ширше інших у два рази.
Міняємо макет першої статті горизонтальний
Перша стаття у нас дуже велика. Щоб оптимізувати місце, давайте змінимо її макет на горизонтальний.
.first-article {
flex-direction: row;
}
.first-article .article-body {
flex: 1;
}
.first-article .article-image {
height: 300px;
order: 2;
padding-top: 0;
width: 400px;
}
Тут є дуже важлива властивість order, за допомогою якого можна змінювати порядок HTML елементів без зміни розмітки. Насправді article-image в розмітці йде перед article-body, але показуватися він буде, як ніби він знаходиться після.
Додаємо адаптивність
Все виглядає так, як ми і хотіли, тільки злегка сплюснуте. Пофиксим це, додавши адаптивність. Чудова особливість Flexbox в тому, що для його повного відключення необхідно всього-лише видалити властивість display: flex біля контейнера, а всі інші флексбокс властивості продовжать правильно працювати (align-items або flex).
Тобто, включати адаптивність можна, активуючи Flexbox лише після зазначеного дозволу екрану. Ми видалимо властивість display: flex у елементів .columns і .column, а замість нього причепимо медіа запит:
@media screen and (min-width: 800px) {
.columns,
.column {
display: flex;
}
}
От і все! На маленьких екранах статті будуть йти одна під інший. На екранах 800px і більше статті будуть йти в дві колонки.
Останні штрихи
Щоб макет краще виглядав на великих екранах, давайте додамо трохи CSS стилів:
@media screen and (min-width: 1000px) {
.first-article {
flex-direction: row;
}
.first-article .article-body {
flex: 1;
}
.first-article .article-image {
height: 300px;
order: 2;
padding-top: 0;
width: 400px;
}
.main-column {
flex: 3;
}
.nested-column {
flex: 2;
}
}
У першій статті контент розташований горизонтально: текст по ліву сторону, зображення праворуч. Основна колонка тепер ширше (75%) і містить в собі ще дві колонки (66%). Кінцевий результат!
Висновок
Сподіваюся, я наочно показав вам, що для роботи з Flexbox не потрібно знати всі аспекти та тонкощі! Створений нами адаптивний новинний макет стане вам у нагоді: розберіть його на частини, поиграйтесь з кодом. Пишіть в коментарях, що у вас вийшло!
