Передмова
Модуль Flexbox Layout (Flexible Box) спрямований на те щоб надати більш ефективний спосіб розташування, вирівнювання і розподілу вільного простору між елементами в контейнері, навіть коли їх розмір заздалегідь невідомий і / або динамічний (тому слово "flex").
Основна ідея гнучкою (flex) розмітки полягає в тому, щоб надати контейнеру можливість змінювати ширину / висоту (і порядок) своїх елементів, для того щоб найкращим чином заповнити обсяг пам'яті, доступний (в основному для розміщення на всіх типах і розмірах екранів). Flexbox контейнер розширює елементи щоб заповнити вільний простір або стискає їх щоб уникнути переповнення.
Найголовніше, що Flexbox це спрямований агностик на відміну від звичайних розкладок (блоків заснованих на вертикальному позиціонуванні і строкових елементів заснованих на горизонтальному позиціонуванні). Не дивлячись на те що вони досить добре працюють, їм не вистачає гнучкості для підтримки великих або складних додатків (особливо коли мова йде про зміну орієнтації, зміні розмірів, розтягуванні, стисненні і т. Д.).
Примітка. Flexbox більше підходить для компонентів програми та невеликих макетів, тоді як CSS Grid призначений для більш масштабних макетів.
Основи і термінологія
Так як Flexbox - це цілий модуль, а не окрема властивість, він містить безліч різних речей, включаючи цілий набір властивостей. Деякі з них призначені для установки їх контейнеру (батьківський елемент, відомий як "flex-контейнер"), а інші повинні встановлюватися дочірнім елементам (відомі як "flex-елементи").
Якщо звичайна система компонування заснована на блокових і строкових напрямках, то Flexbox заснований на "flex-flow напрямках". Будь ласка погляньте на цей малюнок з специфікації, яка пояснювала б основну ідею Flexbox.
В основному елементи будуть розташовуватися уздовж основної осі (від main-start до main-end) або попереченой осі (від cross-start до cross-end).
- main axis - це головна вісь flex-контейнера, уздовж якої розташовані flex-елементи. Бережіться того, що це не обов'язково горизонтальна вісь; Вона залежить від якості flex-direction;
- main-start | main-end - flex-елементи розміщуються всередині контейнера, починаючи з main-start і закінчуючи main-end;
- main size - ширина або висота flex-елемента, в залежності напрями основної осі;
- cross axis - це вісь перпендикулярна основний осі, яка називається "поперечної" віссю. Її напрямок залежить від напрямку основної осі;
- cross-start | cross-end - - flex-елементи розміщуються всередині контейнера, починаючи з cross-start і закінчуючи cross-end;
- cross size - ширина або висота flex-елемента, в залежності напрямки поперечної осі;
підтримка браузерами
Розділене на версії Flexbox: