Uitlyning van Fleksblokke op die Kruis-as in CSS
Laat ons nou blokke sowel op die kruis-as uitlyn. Uitlyning op hierdie as word bepaal deur die eienskap align-items. Die waarde flex-start druk die elemente teen die begin van die as, en die waarde flex-end - teen die einde daarvan.
Kom ons probeer met voorbeelde.
Voorbeeld
Laat ons die hoof-as van links na regs rig. In hierdie geval sal die kruis-as van bo na onder wys. Kom ons pas die plasing van ons blokke sowel op die hoof-as as op die kruis-as aan.
Op die hoof-as druk ons die blokke teen sy begin, dit wil sê, teen die linkerkant. Vir hierdie doel stel ons justify-content in op die waarde flex-start. Op die kruis-as druk ons die blokke ook teen sy begin, dit wil sê, teen die boonste kant. Vir hierdie doel stel ons align-items ook in op die waarde flex-start.
Kom ons kyk wat ons kry:
.parent {
display: flex;
flex-direction: row; /* hoof-as na regs, kruis-as af */
justify-content: flex-start; /* blokke na die begin van die hoof-as */
align-items: flex-start; /* blokke na die begin van die kruis-as */
}
Resultaat van die kode-uitvoering:
Voorbeeld
Laat ons nou die blokke teen die einde van die kruis-as druk, dit wil sê, teen die onderkant. Vir hierdie doel stel ons align-items in op die waarde flex-end:
.parent {
display: flex;
flex-direction: row; /* hoof-as na regs, kruis-as af */
justify-content: flex-start; /* blokke na die begin van die hoof-as */
align-items: flex-end; /* blokke na die einde van die kruis-as */
}
Resultaat van die kode-uitvoering:
Voorbeeld
Laat ons nou die hoof-as van bo na onder rig. Aangesien die hoof-as vertikaal is, sal die kruis-as van regs na links wys. Kom ons druk die blokke op albei asse teen hul begin:
.parent {
display: flex;
flex-direction: column; /* hoof-as af, kruis-as regs */
justify-content: flex-start; /* blokke na die begin van die hoof-as */
align-items: flex-start; /* blokke na die begin van die kruis-as */
}
Resultaat van die kode-uitvoering:
Voorbeeld
En nou op die kruis-as druk ons die blokke teen sy einde:
.parent {
display: flex;
flex-direction: column; /* hoof-as af, kruis-as regs */
justify-content: flex-start; /* blokke na die begin van die hoof-as */
align-items: flex-end; /* blokke na die einde van die kruis-as */
}
Resultaat van die kode-uitvoering:
Voorbeeld
Kom ons druk die blokke teen die einde van albei asse:
.parent {
display: flex;
flex-direction: column; /* hoof-as af, kruis-as regs */
justify-content: flex-end; /* blokke na die einde van die hoof-as */
align-items: flex-end; /* blokke na die einde van die kruis-as */
}
Resultaat van die kode-uitvoering:
Voorbeeld
Laat ons die rigting van die hoof-as verander - laat ons dit van onder na bo wys. In hierdie geval sal die kruis-as nie sy rigting verander nie, aangesien die hoof-as steeds vertikaal is.
Kom ons druk die blokke teen die begin van albei asse:
.parent {
display: flex;
flex-direction: column-reverse; /* hoof-as op, kruis-as regs */
justify-content: flex-start; /* blokke na die begin van die hoof-as */
align-items: flex-start; /* blokke na die begin van die kruis-as */
}
Resultaat van die kode-uitvoering:
