Uitbelyning van buigelemente langs die hoofas in CSS
Die eienskap justify-content laat toe
om elemente langs die hoofas uit te belyn. Jy het reeds
die waardes center,
space-between, space-around,
space-evenly behandel. Kom ons bestudeer nou
'n paar bykomende waardes.
Die waarde flex-start druk die elemente na die begin
van die hoofas, en die waarde flex-end - na die einde.
Kom ons kyk na voorbeelde.
Voorbeeld
Laat ons die hoofas van links na regs rig, deur
die eienskap flex-direction die waarde row te gee.
Laat ons die blokke na die begin van die as druk. Vir hierdie justify-content
stel ons die waarde flex-start:
.parent {
display: flex;
flex-direction: row; /* hoofas van links na regs */
justify-content: flex-start; /* blokke na die begin van die hoofas */
}
Resultaat van die kode-uitvoering:
Voorbeeld
Kom ons druk nou die blokke na die einde van die as.
Vir hierdie justify-content stel ons
die waarde flex-end:
.parent {
display: flex;
flex-direction: row; /* hoofas van links na regs */
justify-content: flex-end; /* blokke na die einde van die hoofas */
}
Resultaat van die kode-uitvoering:
Voorbeeld
Laat ons nou die hoofas van regs na links rig,
deur die eienskap flex-direction die waarde
row-reverse te gee. Druk die blokke na die begin
van die as, dit wil sê na die regterkant. Vir hierdie justify-content
stel ons die waarde flex-start:
.parent {
display: flex;
flex-direction: row-reverse; /* hoofas van regs na links */
justify-content: flex-start; /* blokke na die begin van die hoofas */
}
Resultaat van die kode-uitvoering:
Voorbeeld
En nou laat ons die blokke na die einde van die hoof
as druk, dit wil sê na die linkerkant. Vir hierdie justify-content
stel ons die waarde flex-end:
.parent {
display: flex;
flex-direction: row-reverse; /* hoofas van regs na links */
justify-content: flex-end; /* blokke na die einde van die hoofas */
}
Resultaat van die kode-uitvoering:
Voorbeeld
In die vorige voorbeelde was die hoofas horisontaal gerig. Kom ons draai dit nou om en rig dit vertikaal.
Laat ons die hoofas afwaarts rig, deur
die eienskap flex-direction die waarde
column te gee.
Druk die blokke na die begin van die hoofas, dit wil sê
na die boonste kant. Vir hierdie justify-content
stel ons die waarde flex-start:
.parent {
display: flex;
flex-direction: column; /* hoofas van bo na onder */
justify-content: flex-start; /* blokke na die begin van die hoofas */
}
Resultaat van die kode-uitvoering:
Voorbeeld
Kom ons druk nou die blokke na die einde van die hoof
as, dit wil sê na die onderkant. Vir hierdie justify-content
stel ons die waarde flex-end:
.parent {
display: flex;
flex-direction: column; /* hoofas van bo na onder */
justify-content: flex-end; /* blokke na die einde van die hoofas */
}
Resultaat van die kode-uitvoering:
Voorbeeld
Draai die hoofas om, deur dit van onder
na bo te rig. Vir hierdie eienskap flex-direction
gee ons die waarde column-reverse. In
hierdie geval sal die blokke hul volgorde verander -
aan die begin van die as sal die laaste blok in die HTML
kode wees.
Kom ons druk die blokke na die begin van die hoofas,
dit wil sê na die onderkant. Vir hierdie justify-content
stel ons die waarde flex-start:
.parent {
display: flex;
flex-direction: column-reverse; /* hoofas van onder na bo */
justify-content: flex-start; /* blokke na die begin van die hoofas */
}
Resultaat van die kode-uitvoering:
Voorbeeld
Kom ons druk die blokke na die einde van die hoofas,
dit wil sê na die boonste kant. Vir hierdie justify-content
stel ons die waarde flex-end:
.parent {
display: flex;
flex-direction: column-reverse; /* hoofas van onder na bo */
justify-content: flex-end; /* blokke na die einde van die hoofas */
}
Resultaat van die kode-uitvoering:
