Flex elementin esas ox boyu olcusu
width ve height xususiyyetleri
flex elementin enini ve hundurluyunu oxlarin
istiqametinden asili olmayaraq teyin edir. Yeni,
eger ox ufqidirse, width eni teyin edecek,
amma ox şaqulidirse, width yenə də
eni teyin edecek. Bezen bu davranış rahatsizliq
yaradır.
Flex modelinde flex-basis adli xususi bir xususiyyet var,
hansi ki, elementin esas ox boyu olcusunu teyin edir.
Bu o demekdir ki,
eger esas ox ufqidirse - bu xususiyyet
elementlerin enini teyin edecek, şaquli olarsa
- hundurluyunu. Bu xususiyyet flex elementlerin
ozune teyin edilmelidir, valideynine deyil. Gelin
numunelerle yaxindan baxaq.
Fərz edek ki, esas ox ufqidir, ve
flex-basis 50px qiymetine malikdir.
Bu halda elementlerin eni
50px olacaq:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex;
flex-direction: row; /* ox ufqidir */
width: 300px;
height: 300px;
border: 1px solid red;
}
.child {
flex-basis: 50px; /* elementin olcusu */
border: 1px solid green;
}
:
Gelin indi oxu cevirek, flex-basis xususiyyetinin
qiymetini deyişmeden. Bu halda
artiq elementlerin hundurluyu 50px olacaq:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex;
flex-direction: column; /* ox şaqulidir */
width: 300px;
height: 300px;
border: 1px solid red;
}
.child {
flex-basis: 50px;
border: 1px solid green;
}
:
5 flex-blok hazırlayın. Onlara
esas ox boyu enini 100px teyin edin.
Bloklarin muxtelif oxlar boyu davranişina
baxın.
Eger ox ufqidirse ve bloka hem flex-basis xususiyyeti,
hem de width xususiyyeti teyin olunubsa,
flex-basis ustunluk teşkil edecek.
Bunu yoxlayın.
Eger ox şaqulidirse ve bloka hem flex-basis xususiyyeti,
hem de height xususiyyeti teyin olunubsa,
flex-basis ustunluk teşkil edecek.
Bunu yoxlayın.