Flex-flow hassaýaty
flex-flow hassaýaty
flex-direction
we flex-wrap hassaýatlary üçin gysgaltma.
Bellenen bahasy: row nowrap.
Esasy elemente degişlidir we
flex bloklar üçin ulanylýar.
Sintaksis
selektor {
flex-flow: esasy_okunyň_ugry köp_setirli;
}
Bahalaryň tertibi möhüm däl.
Mysal
Şu mysalda bloklar konteýnere sylanmaz we birnäçe hatarda ýerleşer:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
border: 1px solid #696989;
height: 200px;
width: 330px;
margin: auto;
}
#parent > div {
width: 100px;
height: 50px;
border: 1px solid #696989;
}
:
Mysal
Esasy okunyň ugryny üýtgedeliň (row ýerine column):
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
flex-flow: column wrap;
justify-content: space-between;
display: flex;
height: 200px;
width: 330px;
margin: auto;
border: 1px solid #696989;
}
#parent > div {
width: 100px;
height: 50px;
border: 1px solid #696989;
}
:
Şeýle-de görüň
-
flex bloklaryň ok ugruny kesgitleýän
flex-directionhassaýaty -
esasy ok boýunça düzmek ýerleşişini kesgitleýän
justify-contenthassaýaty -
garaşy ok boýunça düzmek ýerleşişini kesgitleýän
align-itemshassaýaty -
flex bloklaryň köp setirliligini kesgitleýän
flex-wraphassaýaty -
flex bloklaryň tertibini kesgitleýän
orderhassaýaty -
bir blok üçin düzmek ýerleşişini kesgitleýän
align-selfhassaýaty -
ýörite flex blokunyň ölçegini kesgitleýän
flex-basishassaýaty -
flex bloklaryň açgözligini kesgitleýän
flex-growhassaýaty -
flex bloklaryň ýygynlygyny kesgitleýän
flex-shrinkhassaýaty -
flex-grow, flex-shrink we flex-basis hassaýatlary üçin gysgaltma bolan
flexhassaýaty