Уласцівасць flex
Уласцівасць flex
з'яўляецца скарачэннем для flex-basis
,
flex-shrink
і flex-grow
.
Ужываецца да: канкрэтнага flex блока.
Парадак значэнняў не мае значэння. Другі і трэці
параметры (flex-shrink
, flex-basis
)
не з'яўляюцца абавязковымі.
Значэнні
Гл. адпаведныя ўласцівасці.
Значэнне па змаўчанні: 0
1
auto.
Прыклад
Хай у нас ёсць 3
элементы. Шырыня кожнага з іх
складае 200px
і сумарна роўная 600px
,
што больш за шырыню бацькоўскага кантэйнера, якая
роўная 300px
. Давайце назначым для першага элемента шырыню
200px
, для другога элемента - 300px
, для
трэцяга элемента - 100px
. У ўсіх элементаў
хай значэнне flex-basis
будзе роўнае 1
,
а flex-shrink
- 1
, 2
, 3
у адпаведнасці
з парадкавым нумарам элемента:
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem2">3</div>
</div>
.parent {
display: flex;
width: 350px;
height: 200px;
border: 1px solid red;
}
.child {
width: 200px;
height: 50px;
border: 1px solid green;
}
.elem1 {
flex: 200px 1 1;
}
.elem2 {
flex: 300px 1 2;
}
.elem3 {
flex: 100px 1 3;
}
:
Глядзіце таксама
-
уласцівасць
flex-direction
,
якое задае кірунак восяў flex блокаў -
уласцівасць
justify-content
,
якое задае выраўноўванне па галоўнай восі -
уласцівасць
align-items
,
якое задае выраўноўванне па папярочнай восі -
уласцівасць
flex-wrap
,
якое задае шматрадковасць flex блокаў -
уласцівасць
flex-flow
,
скарачэнне для flex-direction і flex-wrap -
уласцівасць
order
,
якое задае парадак flex блокаў -
уласцівасць
align-self
,
якое задае выраўноўванне аднаго блока -
уласцівасць
flex-basis
,
якое задае памер канкрэтнага flex блока -
уласцівасць
flex-grow
,
якое задае прагавітасць flex блокаў -
уласцівасць
flex-shrink
,
якое задае сціскальнасць flex блокаў