У цій статті ми розглянемо як c допомогою flexbox вирішити основні проблеми css, які виникають при верстці макету без болю.
Flexbox - стандарт css, створений для оптимізації процесу створення користувацьких інтерфейсів. Використовуючи властивості flexbox-ів, можна створювати сторінки, ніби складаючи блоки, які легко позиціонуються і ресайз так, як нам потрібно. Сайти та додатки, створені з використанням flexbox, за замовчуванням адаптивні і добре виглядають на будь-якому екрані.
На перший погляд не здається складним, але на ділі зверстати колонки таким чином може виявитися не дуже приємною завданням. Просто встановити min-height можна, так як при збільшенні обсягу контенту в одній з них, її висота виросте, а решта залишаться короткими.
Якщо використовувати flexbox, то рішення буде досить простим. Все що потрібно - ініціювати flex і переконатися, що у властивостях flex-direction і align-items встановлені значення за замовчуванням.
/ * Це значення за замовчуванням, але їх все одно можна встановити * /
flex-direction. row; / * Елементи всередині контейнера будуть позиціонуватися горизонтально * /
align-items. stretch; / * Елементи всередині контейнера будуть займати всю його висоту * /
<. -- Одинаковые по высоте колонки -->
Називається воно order і дозволяє міняти місцями будь-яку кількість flex-елементів та змінювати послідовність, з якою вони розташовуються на екрані. Єдиний параметр цілим числом визначає позицію елемента, чим нижче номер - тим вище пріоритет.