📚 Пояснення властивостей CSS Flexbox
Властивість align-content
Визначає розподіл простору між і навколо елементів контенту вздовж поперечної осі flexbox контейнера:
- space-between - Рівномірно розподіляє елементи. Перший елемент знаходиться на початку, останній - в кінці
- space-around - Рівномірно розподіляє елементи з однаковим простором навколо кожного
- space-evenly - Рівномірно розподіляє елементи з однаковим проміжком між ними
- stretch - Розтягує елементи з автоматичним розміром для заповнення контейнера
- flex-start - Елементи вирівнюються на початку поперечної осі
- flex-end - Елементи вирівнюються в кінці поперечної осі
- center - Елементи вирівнюються по центру поперечної осі
Властивість align-items
Вирівнює flex-елементи вздовж поперечної осі поточного рядка:
- flex-start - Край початку поперечної осі flex-елемента вирівнюється з краєм початку лінії
- flex-end - Край кінця поперечної осі flex-елемента вирівнюється з краєм кінця лінії
- center - Елементи розташовуються по центру поперечної осі
- stretch - Flex-елементи розтягуються так, щоб розмір поперечної осі елемента збігався з лінією
- baseline - Елементи вирівнюються по їх базовій лінії. Базова лінія (baseline) - це уявна лінія, що проходить по нижньому краю символів без урахування висячих елементів, як у літер 'ц', 'д', 'р', 'щ'