Готовий CSS Flexbox для прайм-тайму?

33

Від автора: якщо коротко: так. Як front-end розробник, іноді я задаюся питанням: «ого, крута штука. Можна її використовувати в продакшені на роботі, або у теорії це звучить краще, ніж на практиці?». Я весь час перечитую специфікації CSS, щоб зрозуміти, чи покращить нова технологія мій веб-дизайн, спростить вона мій код, стане код коротше.

Flexbox відмінно підходить для адаптивного дизайну

Flexbox не можна назвати новою технологією… АЛЕ за останні кілька років з’явилося дуже багато нових мобільних пристроїв, і усім їм потрібні гнучкі, адаптивні макети та шаблони. Як мінімум, вам варто подумати про включення flexbox у свій наступний проект, якщо ви ще не зробили цього. І не турбуйтеся, flexbox можна використовувати разом з будь-яким фреймворком. Я до сих пір користуюся модифікованою версією Skeleton Grid, в який я додав пару SASS змінних і миксинов. Якщо дійсно хочете познущатися над собою, спробуйте використовувати flexbox з одиницями вимірювання vh і vw замість пікселів і відсотків.

А що з сумісністю десктопних браузерів?

Без паніки, я все розповім. Подивитися сумісність з браузерами можна на CanIUse.com. На момент написання статті flexbox підтримується у всіх сучасних браузерах крім IE 11, у нього «часткова підтримка». Якщо враховувати у роботі відомі баги і виправляти їх, це не буде проблемою.

Так що, з IE знову одні проблеми, так?

Так, але їх частка на ринку настільки мала, що я б навіть не переживав. Можете подивитися останню статистику по частці IE на ринку на сайті W3C. На момент написання статті частка IE10 і більш старих версій становить 0,4% від ВСІХ БРАУЗЕРІВ (див. скріншот 1.1). Перш ніж використовувати flexbox у наступному проекті, проаналізуйте свою аудиторію. Велика частина ваших користувачів повинні сидіти як мінімум на IE10 і вище.

Готов ли CSS Flexbox для прайм-тайма?

Я зрозумів, підтримка хороша. З чого почати?

Щоб не відтворювати вже існуючі демо на flexbox, прочитайте статтю «повне керівництво по Flexbox» визнаного CSS-гуру Кріса Койера, а також «візуальне керівництво за властивостями CSS3 Flexbox» Дімітара Стоянова. В обох статтях дуже добре пояснюються Flexbox правила. Я дуже часто сам повертаюся до цих статей, коли намагаюся вбудувати Flexbox у свої макети… в них дуже багато корисного і нового для мене.

Подивіться демо.

Ось так я використовую flexbox у своїй роботі

У програмуванні є одна мантра, яку ви будете чути дуже часто, «не повторюйте» або по-англійськи «don’t Repeat Yourself», або просто DRY. Щоб не роздмухувати свій код, я вмонтував flexbox в роботу за допомогою чудової бібліотеки SASS миксинов, яка бере на себе всю турботу про вендорних префіксах. Не чули про SASS? Вам потрібно прочитати мою останню статтю.

Міксин нижче дозволяє мені викликати всі п’ять оголошень flexbox в один рядок:

@mixin flexbox {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
}
.element {
@include flexbox;
}

Дуже просто. Враховуючи всі Flexbox правила, це сильно економить час. Як я думаю, скоро префікси взагалі не будуть потрібні, так як всі основні браузери почали приймати синтаксис. Але ця бібліотека миксинов повинна заповнити цей пробіл на якийсь час.

Я докладно розповів про плюси, а також як інтегрувати flexbox в роботу. У вас міг залишитися питання: «як ти насправді використовуєш flexbox в дизайні?». Ну… я використовував flexbox на нещодавно запущеному сайті Next Door Milwaukee.

У цьому проекті арт-директор дизайну захотів зробити щільну сітку без роздільників між колонками, а також вертикально центрований текст на перекрывающем шарі (див. скріншот 1.2). З вертикальним центруванням виникли проблеми, більша частина спільноти веб-розробників відмовилися від таблиць в макетах. Але ми з легкістю вийшли з ситуації за допомогою «align-items: center;», правила Flexbox.

Готов ли CSS Flexbox для прайм-тайма?

З допомогою Flexbox я з легкістю нормалізував висоту елементів, сітки, незважаючи на контент. І не довелося явно задавати висоту, з-за чого зовнішній вигляд став більш однорідний, а блоки можуть автоматично збільшуватися і зменшуватися за необхідності. Відмінно підходить для адаптивних сайтів. Нижче наведено приклад прямо з Next Door Milwaukee:

Section Title 1
Section Title 1

Tation aliquip vulputate ex sit facilisis accumsan eu te nonummy feugait autem.

Learn More
Section Title 2
Section Title 2

Tation aliquip vulputate ex sit facilisis accumsan eu te nonummy feugait autem.

Learn More

SASS (і вкладений CSS):

.dualCTAbox {
@include flexbox;
@include align-items(stretch);
@include align-content(stretch);
@include flex-wrap(wrap);
.ctaBox {
text-align:center;
@include align-self(stretch);
@include flexbox;
a {
@include flexbox;
@include align-items(center);
@include justify-content(center);
@include flex-wrap(wrap);
@include align-content(center);
div,
h5,
p {
width: 100%;
margin-bottom: .8em;
line-height: 1.2 em;
}
h5 {
margin-bottom: 0;
line-height: 1.2 em;
}
width: calc(100% — 40px);
padding: 20px;
min-height: 240px;
}
.button{
margin-bottom: 0;
}
}
}

Якщо тепер додати CSS медіа запити, то ширина елементів буде підлаштовуватися під ширину вікна браузера. Можна навіть змінювати порядок відображення елементів у браузері. Особливо важливо на мобільних пристроях, коли потрібно думати про користувача і міняти положення елементів меню, сайдбара і CTA елементів, щоб досягти найкращого досвіду на невеликих екранах.

Якщо ви ще не використовуєте flexbox, спробуйте, хороший інструмент. На дворі вже 2017 рік, давайте рухатися вперед.