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 блоктардың сығылуын белгілейді