Flex elementų lygiavimas pagrindinėje ašyje CSS
Savybė justify-content leidžia
išlyginti elementus pagrindinėje ašyje. Anksčiau
jūs jau susipažinote su reikšmėmis center,
space-between, space-around,
space-evenly. Dabar išnagrinėkime
dar keletą reikšmių.
Reikšmė flex-start priglunda elementus prie
pagrindinės ašies pradžios, o reikšmė flex-end - prie pabaigos.
Pažiūrėkime į pavyzdžius.
Pavyzdys
Nukreipkime pagrindinę ašį iš kairės į dešinę, nustatydami
savybės flex-direction reikšmę row.
Prigluskime blokus prie ašies pradžios. Tam justify-content
nustatykime reikšmę flex-start:
.parent {
display: flex;
flex-direction: row; /* pagrindinė ašis iš kairės į dešinę */
justify-content: flex-start; /* blokai prie pagrindinės ašies pradžios */
}
Kodo vykdymo rezultatas:
Pavyzdys
Dabar prigluskime blokus prie ašies pabaigos.
Tam justify-content nustatykime
reikšmę flex-end:
.parent {
display: flex;
flex-direction: row; /* pagrindinė ašis iš kairės į dešinę */
justify-content: flex-end; /* blokai prie pagrindinės ašies pabaigos */
}
Kodo vykdymo rezultatas:
Pavyzdys
Dabar nukreipkime pagrindinę ašį iš dešinės į kairę,
nustatydami savybės flex-direction reikšmę
row-reverse. Prigluskime blokus prie ašies
pradžios, tai yra prie dešiniojo krašto. Tam justify-content
nustatykime reikšmę flex-start:
.parent {
display: flex;
flex-direction: row-reverse; /* pagrindinė ašis iš dešinės į kairę */
justify-content: flex-start; /* blokai prie pagrindinės ašies pradžios */
}
Kodo vykdymo rezultatas:
Pavyzdys
O dabar prigluskime blokus prie pagrindinės ašies
pabaigos, tai yra prie kairiojo krašto. Tam justify-content
nustatykime reikšmę flex-end:
.parent {
display: flex;
flex-direction: row-reverse; /* pagrindinė ašis iš dešinės į kairę */
justify-content: flex-end; /* blokai prie pagrindinės ašies pabaigos */
}
Kodo vykdymo rezultatas:
Pavyzdys
Ankstesniuose pavyzdžiuose pagrindinė ašis buvo nukreipta horizontaliai. Dabar apverskime ją ir nukreipkime vertikaliai.
Nukreipkime pagrindinę ašį žemyn, nustatydami
savybės flex-direction reikšmę
column.
Prigluskime blokus prie pagrindinės ašies pradžios, tai yra
prie viršutinio krašto. Tam justify-content
nustatykime reikšmę flex-start:
.parent {
display: flex;
flex-direction: column; /* pagrindinė ašis iš viršaus į apačią */
justify-content: flex-start; /* blokai prie pagrindinės ašies pradžios */
}
Kodo vykdymo rezultatas:
Pavyzdys
Dabar prigluskime blokus prie pagrindinės ašies
pabaigos, tai yra prie apatinio krašto. Tam justify-content
nustatykime reikšmę flex-end:
.parent {
display: flex;
flex-direction: column; /* pagrindinė ašis iš viršaus į apačią */
justify-content: flex-end; /* blokai prie pagrindinės ašies pabaigos */
}
Kodo vykdymo rezultatas:
Pavyzdys
Apverskime pagrindinę ašį, nukreipdami ją iš apačios
į viršų. Tam savybės flex-direction
nustatykime reikšmę column-reverse. Šiuo
atveju blokai pakeis savo tvarką -
ašies pradžioje bus paskutinis HTML
kode esantis blokas.
Prigluskime blokus prie pagrindinės ašies pradžios,
tai yra prie apatinio krašto. Tam justify-content
nustatykime reikšmę flex-start:
.parent {
display: flex;
flex-direction: column-reverse; /* pagrindinė ašis iš apačios į viršų */
justify-content: flex-start; /* blokai prie pagrindinės ašies pradžios */
}
Kodo vykdymo rezultatas:
Pavyzdys
Prigluskime blokus prie pagrindinės ašies pabaigos,
tai yra prie viršutinio krašto. Tam justify-content
nustatykime reikšmę flex-end:
.parent {
display: flex;
flex-direction: column-reverse; /* pagrindinė ašis iš apačios į viršų */
justify-content: flex-end; /* blokai prie pagrindinės ašies pabaigos */
}
Kodo vykdymo rezultatas:
