Верстка за допомогою flexbox, офіційно звана CSS Flexible Box Layout Module являє собою новий модуль компонування CSS3, призначений для поліпшення вирівнювання, напряму та порядку елементів у контейнері, навіть якщо вони мають динамічний або невідомий розмір. Головною характеристикою flex-контейнера є здатність змінювати ширину або висоту дочірніх елементів, щоб найбільш оптимально заповнити доступний простір при різних розмірах екрану. , Тому складніші макети можна скидати з меншою кількістю коду, що в результаті призводить до більш простого процесу розробки. Алгоритм верстки на flexbox заснований на орієнтації, на відміну від блокової або малої верстки, що базуються на вертикалі та горизонталі. Верстку на flexbox слід використовувати для невеликих компонентів програми, у той час як новий CSS Grid Layout Module призначений для обробки великих масштабованих макетів.
У цьому посібнику ми пояснюємо як працюють flex-властивості та фокусуємося на тому, як ці властивості візуально впливають на макет.
Оригінал: scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
Демонстрація: codepen.io/justd/full/yydezN/