flex
Якщо треба виставляи горизонатльно/вертикально - то у батьківському тегу назначаємо flex - і тоді усі підпорядковані будуть ьвравнюваться\ставитись за налаштуванням. flex може:
- змінювати ширину і висоту його дітей;
- змінювати напрямок розташування його дітей (вирівнювання в колонку або рядок);
- змінювати порядок відображення елементів та відстань між ними;
- розширювати елементи, щоб оптимально заповнити доступний простір;
- стискати елементи, щоб запобігти переповненню.
властивості флекс-контейнер
Надання тегу властивості флекс
- flex - блоковий
- inline-flex - рядково-блоковий
.wrap{ display: flex; }
justify-content
центрування:
- flex-start — елементи притискаються до точки main-start головної осі. Це значення за замовчуванням.
- flex-end — елементи притискаються до точки main-end головної осі.
- center — елементи центруються на осі.
- space-between — елементи рівномірно розподіляються на головній осі. Перший елемент встановлюється на початок осі, а останній на кінець.
- space-around — елементи розподіляються рівномірно, але лівий та правий елементи розташовані на відстані від рамок контейнера на половину проміжку між іншими елементами.
- space-evenly — елементи розподіляються так, що відстань між елементами та від крайніх елементів до меж контейнера однакова.
justify-content: center;
flex-wrap
Переніс букв або єлементів. Дозволяє перетворити однорядковий контейнер на багаторядковий. Елементи будуть додаватися в рядок, доки в ньому буде місце, після чого буде автоматично створено ще один рядок.
- nowrap — усі елементи будуть на одному рядку. Це значення за замовчуванням.
- wrap — дозволяє елементам перестрибувати на інші рядки, які за замовчуванням розташовуються зверху вниз (уздовж cross axis).
- wrap-reverse — дозволяє елементам перестрибувати на інші рядки, які розташовуються знизу вгору (уздовж cross axis).
flex-wrap: wrap;
align-content
Керує вирівнюванням усіх рядків багаторядкового контейнера уздовж cross axis, якщо є вільне місце. Аналогічно тому, як align-items вирівнює елементи в кожному рядку. Ця властивість не діє, коли є лише один рядок елементів або в контейнері немає вільного місця за вертикаллю (явно не задана висота більше, ніж контент).
- stretch — рядки рівномірно розтягуються, щоб зайняти все місце. Значення за замовчуванням.
- flex-start — рядки притискаються до старту cross axis.
- flex-end — рядки притискаються до кінця cross axis.
- center — рядки центруються на осі cross axis.
align-content: center;
gap
Указує відстань між єлементами флекс-конетнтк тільки по горизонталі
gap: 4px;
по горизонталі і вертикалі
gap: 4px 5px;
align-items
керує розташуванням елементів вздовж поперечної осі
- stretch — елементи розтягуються по всій довжині осі cross axis. Це значення за замовчуванням.
- flex-start — елементи притискаються до точки cross start.
- flex-end — елементи притискаються до точки cross end.
- center — елементи центруються по осі cross axis.
- baseline — елементи вирівнюються по базовій лінії їхнього текстового вмісту.
align-items: center;
flex-direction
система розташування елементів в одному напрямку: горизонтально чи вертикально. Властивість flex-direction задає напрямок головної осі, а отже визначає напрямок елементів у контейнері.
- row — вісь починається зліва й закінчується праворуч. Це значення за замовчуванням.
- row-reverse — вісь починається праворуч й закінчується ліворуч.
- column — головна вісь стає вертикально, початок зверху та кінець знизу.
- column-reverse — головна вісь розташовується вертикально, початок знизу, кінець зверху.
властивості флекс-єлементів
flex-basis
визначає початковий розмір flex-елемента у flex-контейнері. Для flex-елементів ця властивість має таку саму функцію, що і властивість width.
flex-basis: auto | значення
flex-grow
Визначає здатність елемента займати більше місця (рости), ніж початковий розмір. Значення визначається як пропорція (частка) вільного місця в контейнері.
flex-grow: 0; //0 - утискаються, 1-розтягуются...можна 1000 - то це буде коєфіцієнт відносто того у кого меньше. Або 0.5
flex-shrink
На противагу властивості flex-grow, flex-shrink визначає здатність flex-елемента займати менше місця (стискатися), ніж його початковий розмір, тобто впливає на фінальний розмір елемента.
flex-shrink: 1; //1 - за замовчуванням дозволено утискатись, 0-розтягуются...можна 1000 - то це буде коєфіцієнт відносто того у кого меньше.
align-self
дозволяє елементу змінити своє розташування на cross axis, перевизначивши собі значення властивості align-items від контейнера. align-self: auto | flex-start | flex-end | center | baseline | stretch
order
Для сортування / порядку / вага єлементу. Сортування від меньшого до більшого. Можна і мінусові значення.
order: 0; //0 - за замовчуванням як у html прописано.