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

• змінювати ширину і висоту його дітей;
• змінювати напрямок розташування його дітей (вирівнювання в колонку або рядок);
• змінювати порядок відображення елементів та відстань між ними;
• розширювати елементи, щоб оптимально заповнити доступний простір;
• стискати елементи, щоб запобігти переповненню.

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

• flex - блоковий
• inline-flex - рядково-блоковий

.wrap{
display: flex;
}

центрування:

• flex-start — елементи притискаються до точки main-start головної осі. Це значення за замовчуванням.
• flex-end — елементи притискаються до точки main-end головної осі.
• center — елементи центруються на осі.
• space-between — елементи рівномірно розподіляються на головній осі. Перший елемент встановлюється на початок осі, а останній на кінець.
• space-around — елементи розподіляються рівномірно, але лівий та правий елементи розташовані на відстані від рамок контейнера на половину проміжку між іншими елементами.
• space-evenly — елементи розподіляються так, що відстань між елементами та від крайніх елементів до меж контейнера однакова.

justify-content: center;

Переніс букв або єлементів

flex-wrap: wrap;

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

align-content: center;

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

gap: 4px;

по горизонталі і вертикалі

gap: 4px 5px;

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

align-items: center;

система розташування елементів в одному напрямку: горизонтально чи вертикально. Властивість flex-direction задає напрямок головної осі, а отже визначає напрямок елементів у контейнері.

• row — вісь починається зліва й закінчується праворуч. Це значення за замовчуванням.
• row-reverse — вісь починається праворуч й закінчується ліворуч.
• column — головна вісь стає вертикально, початок зверху та кінець знизу.
• column-reverse — головна вісь розташовується вертикально, початок знизу, кінець зверху.

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

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

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

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

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

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