Flexbox е една от най-важните технологии в модерния CSS. В тази статия ще разгледаме свойствата на flex items – елементите вътре във flex контейнер, които контролират размера, подредбата и поведението на всеки елемент в layout-а.
По-долу ще намериш и видео урок, който показва всички примери нагледно.
🎬 Видео урок: Flex Items във Flexbox
Какво е flex item?
Всеки елемент, който е директно дете на елемент с display: flex, става flex item. Само тези елементи могат да използват специалните свойства на Flexbox.
<div class="container"> <div>1</div> <div>2</div> <div>3</div> </div>
Трите вътрешни div елемента са flex items.
flex-basis – началният размер на елемента
flex-basis определя основния размер на елемента по главната ос. Той е отправната точка, от която Flexbox започва изчисленията.
.item1 { flex-basis: 100px; }
.item2 { flex-basis: 200px; }
.item3 { flex-basis: 150px; }
flex-grow – разпределение на свободното пространство
flex-grow определя каква част от свободното място ще получи всеки елемент. Това не е абсолютна ширина, а относителен дял от наличното пространство.
.item1 { flex-grow: 1; }
.item2 { flex-grow: 2; }
.item3 { flex-grow: 1; }
В този пример свободното пространство се разпределя в съотношение 1 : 2 : 1.
flex-shrink – кой колко ще се свива
Когато няма достатъчно място, flex-shrink определя кои елементи ще се смаляват повече.
.item1 { flex-shrink: 1; }
.item2 { flex-shrink: 0; }
.item3 { flex-shrink: 1; }
Тук вторият елемент няма да се свива.
flex – съкратен запис
flex е кратка форма за flex-grow, flex-shrink и flex-basis.
.item {
flex: 1 1 200px;
}
Най-често използваната форма е:
.item {
flex: 1;
}
order – визуалният ред на елементите
order позволява да променим подредбата на елементите без да пипаме HTML.
.item1 { order: 3; }
.item2 { order: 1; }
.item3 { order: 2; }
align-self – индивидуално подравняване
С align-self един елемент може да има различно подравняване от останалите.
.item2 {
align-self: flex-end;
}
Заключение
Свойствата на flex items дават пълен контрол върху размера, подредбата и поведението на елементите във Flexbox. Чрез тях можеш да създаваш адаптивни, гъвкави и модерни уеб оформления.