Спочатку назви вже не зовсім ті, що були XDD Коли ми були молодшими, вчили box, flexbox, а тепер їх вже не використовують
CSS Flexbox в 2017 році офіційно став рекомендованим стандартом W3C (W3C Recommendation). Ця специфікація пройшла через кілька років розвитку та покращень:
- 2009 рік: найперша версія використовувала
display: box - 2011 рік: перехідна версія використовувала
display: flexbox - 2012 рік: сучасна версія почала використовувати
display: flex - 2017 рік: специфікація Flexbox офіційно стала стандартом W3C
Зараз ми використовуємо найновішу та стабільну версію display: flex.
Основна вісь і поперечна вісь — основна вісь
display: flex;
flex-direction: (row|row-reverse|column|column-reverse);
justify-content
display: flex;
flex-direction: row;
justify-content: (start|center|end|space-between|space-evenly|space-around);
gap: (n-px)
Це вирівнює елементи вздовж основної осі (main axis), після чого можна встановити відстань між елементами (gap).
justify-content також має варіанти для вирівнювання елементів на заповненому просторі, і якщо простір заповнений, то параметр gap вже не буде працювати.
flex-basis, flex-grow, flex-shrink
Ці властивості визначають, як обробляти додатковий/зменшений простір при зміні ширини контейнера flex.
flex-basis — це початкова ширина внутрішнього елемента, flex-grow — це пропорція, на яку елементи зростають, коли зовнішній контейнер збільшується.
Коли flex-grow = 0, і контейнер збільшується з 200px до 380px, елементи не будуть змінювати свій розмір.
Коли flex-grow ≠ 0, елементи змінюються відповідно до заданої пропорції.
На лівому малюнку, додатковий простір складає 180px (380–200), і цей простір розподіляється між елементами пропорційно 1:3. На правому малюнку, якщо ви хочете, щоб синя частина не змінювалася, встановіть її значення в 0. Звісно, якщо синя частина має значення 0, це не буде мати жодного ефекту на червону частину, навіть якщо для неї встановлено значення flex-grow.
Зворотньо, flex-shrink відповідає за зменшення простору. Тому, коли воно встановлене на 0, елементи не будуть зменшуватися. Якщо ж значення відмінне від 0, то простір зменшується відповідно до пропорції.
На правому малюнку зменшення простору складає 100px (200–100), і цей простір зменшується пропорційно 1:2.
Зменшення простору складає 100px → пропорція 1:2 розподіляє зменшений простір (33,33, 66,67), після чого розмір кожного елемента змінюється на (100–33,33, 100–66,67) = (66,67, 33,33).
Перекладено з: CSS — Flex layout