flex

Якщо треба виставляи горизонатльно/вертикально - то у батьківському тегу назначаємо flex - і тоді усі підпорядковані будуть ьвравнюваться\ставитись за налаштуванням. flex може:

змінювати ширину і висоту його дітей;

змінювати напрямок розташування його дітей (вирівнювання в колонку або рядок);

змінювати порядок відображення елементів та відстань між ними;

розширювати елементи, щоб оптимально заповнити доступний простір;

стискати елементи, щоб запобігти переповненню.

властивості флекс-контейнер

Надання тегу властивості флекс

.wrap{
display: flex;
}

justify-content

центрування

justify-content: center;

flex-wrap

Переніс букв

flex-wrap: wrap;

align-content

Вирівнювання усього рядка

align-content: center;

gap

Указує відстань між єлементами флекс-конетнтк

gap: 4;

align-items

Вирівнювання єлеменів усередині флех

align-items: center;

властивості флекс-єлементів

flex-grow

Дозволяє розтягувати єлементи якщо є місце

flex-grow: 0; //0 - утискаються, 1-розтягуются...можна 1000 - то це буде коєфіцієнт відносто того у кого меньше. Або 0.5

flex-shrink

Дозволяє стискати єлементи

flex-shrink: 1; //1 - за замовчуванням дозволено утискатись, 0-розтягуются...можна 1000 - то це буде коєфіцієнт відносто того у кого меньше.

order

Для сортування / порядку / вага єлементу. Сортування від меньшого до більшого. Можна і мінусові значення.

order: 0; //0 - за замовчуванням як у html прописано.