Верстаємо новинний сайт за допомогою Flexbox

image

Примітка: цей матеріал являє собою вільний переказ статьи Джеремі Томаса про те, як працювати з Flexbox на прикладі верстки шаблону новинного сайту.

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

Причина, по якій автор використовує Flexbox – це велика кількість можливостей, які він надає:
— легкість у створенні адаптивних стовпців;
— створення колонок однакової висоти;
— можливість притиснення вмісту до низу контейнера.

Ну, поїхали!

1. Починаємо з створення двох стовпців
Створення стовпців за допомогою CSS завжди тягло за собою певні труднощі. Протягом тривалого часу для виконання даної задачі широко використовувалися (і використовуються) float'и і / або таблиці, але кожен з цих методів мав (і має) свої недоліки.

У свою чергу, Flexbox спрощує цей процес, володіючи рядом таких переваг, як:

— написання більш «чистого» коду: від нас лише потрібно створити контейнер з правилом display: flex;
— гнучкість: ми можемо змінювати розмір, розтягувати і вирівнювати стовпці шляхом зміни пари рядків CSS;
— семантична розмітка;
— крім того, з використанням Flexbox відпадає необхідність скасовувати обтікання щоб уникнути непередбачуваної поведінки лейаута.

Давайте почнемо роботу з створення двох стовпців, один з яких буде займати 2/3 ширини нашого контейнера, а ще один — 1/3 його частину.

<div class="columns">
<div class="column main-column">
2/3 column
</div>
<div class="column">
1/3 column
</div>
</div>

Тут присутні два елементи:

— контейнер columns;
— два дочірніх елемента column, один з яких має додатковий клас main-column, який ми використовуємо пізніше для того, щоб зробити стовпець ширше.

.columns {
display: flex;
}

.column {
flex: 1;
}

.main-column {
flex: 2;
}

Оскільки main-column має значення flex рівне 2, то цей стовпець займе в два рази більше місця, ніж другий.

Додамо трохи візуального оформлення і, в підсумку, отримаємо:

image
Натисніть для перегляду в дії

2. Робимо кожен стовпець flexbox-контейнером
Кожен з двох стовпців буде містити кілька вертикально розташованих статей, тому з цих двох елементів ми, в свою чергу, також повинні зробити flexbox-контейнери.

Отже, нам необхідно, щоб статті:

— розташовувалися вертикально всередині стовпця-контейнера;
— займали все доступне місце.

Правило flex-direction: column, вказане для контейнера, разом з правилом flex: 1, зазначеним для дочірнього елемента, дозволяє статті заповнити все вільне місце по вертикалі, при цьому висота перших двох стовпців залишиться незмінною.

image
Натисніть для перегляду в дії

3. Робимо контейнер зі статті
Тепер, щоб ще більше розширити наші можливості, давайте уявимо кожну статтю у вигляді flexbox-контейнера. Кожен такий контейнер буде містити:

— заголовок;
— параграф;
— інформаційну панель з ім'ям автора і кількістю коментарів;
— якусь адаптивну картинку.

Тут ми використовуємо Flexbox для того, щоб «притиснути» інформаційну панель до низу елемента. Ось, подивіться, який результат ми очікуємо отримати.

image

А ось і сам код:

<a class="article first-article">
<figure class="article-image">
<img src="">
</figure>
<div class="article-body">
<h2 class="article-title">
<!-- Заголовок -->
</h2>
<p class="article-content">
<!-- Контент -->
</p>
<footer class="article-info">
<!-- Інформація -->
</footer>
</div>
</a>

.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.

Також ми застосували властивістьflex: 1 елементу article-content, тим самим розтягнувши його на все вільне місце і притиснувши article-info до низу. Висота стовпців у цьому випадку не має значення.

image
Натисніть для перегляду в дії

4. Додаємо кілька вкладених стовпців
Насправді, нам потрібно, щоб лівий стовпець включав в себе ще декілька стовпців. Тому нам необхідно замінити другий елемент, що відповідає за статтю, контейнером columns, який ми використовували раніше.

<div class="columns">
<div class="column nested-column">
<a class="article">
<!-- Вміст статті -->
</a>
</div>

<div class="column">
<a class="article">
<!-- Вміст статті -->
</a>
<a class="article">
<!-- Вміст статті -->
</a>
<a class="article">
<!-- Вміст статті -->
</a>
</div>
</div>

Оскільки ми хочемо, щоб перший вкладений стовпець був ширший, додамо до елемента клас nested-column, а в CSS зазначимо:

.nested-column {
flex: 2;
}

Тепер цей стовпець буде вдвічі ширше другого.

image
Натисніть для перегляду в дії
5. Робимо першу статтю з горизонтальним лейаутом
Перша стаття у нас насправді велика. Щоб ефективно використовувати місце на екрані монітора, давайте змінимо її орієнтацію на горизонтальну.

.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-елементів без зміни HTML-розмітки. Насправді, article-image в коді йде перед елементом article-body, але веде себе так, ніби стоїть після нього.

image
Натисніть для перегляду в дії

6. Робимо адаптивний лейаут
Тепер все виглядає так, як ми хотіли, хоча і трохи сплюснуте. Давайте виправимо це, додавши нашому лейауту гнучкості.

Однією з чудових речей в Flexbox є те, що досить видалити правилоdisplay: flex в контейнері для того, щоб повністю відключити його (Flexbox), в той час, як інші його властивості (такі, як align-items або flex) залишаться робітниками.

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

Отже, ми збираємося видалити display: flex з селекторів .columns та .column, замість цього «запакувавши» їх в медіа-запит:

@media screen and (min-width: 800px) {
.columns,
.column {
display: flex;
}
}

От і все! На екранах з маленьким дозволом всі статті будуть розташовуватися один над одним, а на екранах з роздільною здатністю понад 800 пікселів — у два стовпці.

7. Додаємо завершальні штрихи
Для того, щоб лейаут виглядав більш привабливо на великих екранах, давайте додамо деякі 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%).

А от і фінальний результат!

image
Натисніть для перегляду в дії

Висновок
Тепер ви і самі бачите, що використовувати Flexbox у своїх проектах можна навіть не вникаючи в усі його тонкощі, і створений лейаут — наочний тому приклад. Принаймні, автор дуже сподівається на це.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.