Justering av flex-element längs huvudaxeln i CSS
Egenskapen justify-content tillåter
justering av element längs huvudaxeln. Tidigare
har du redan gått igenom värdena center,
space-between, space-around,
space-evenly. Låt oss nu studera
ytterligare några värden.
Värdet flex-start pressar elementen till början
av huvudaxeln, och värdet flex-end - till slutet.
Låt oss titta på exempel.
Exempel
Låt oss rikta huvudaxeln från vänster till höger, genom att sätta
egenskapen flex-direction till värdet row.
Låt oss pressa blocken till axelns början. För detta sätter vi justify-content
till värdet flex-start:
.parent {
display: flex;
flex-direction: row; /* huvudaxel från vänster till höger */
justify-content: flex-start; /* block till början av huvudaxeln */
}
Resultat av kodkörning:
Exempel
Låt oss nu pressa blocken till slutet av axeln.
För detta sätter vi justify-content
till värdet flex-end:
.parent {
display: flex;
flex-direction: row; /* huvudaxel från vänster till höger */
justify-content: flex-end; /* block till slutet av huvudaxeln */
}
Resultat av kodkörning:
Exempel
Låt oss nu rikta huvudaxeln från höger till vänster,
genom att sätta egenskapen flex-direction till värdet
row-reverse. Låt oss pressa blocken till början
av axeln, det vill säga till höger kant. För detta sätter vi justify-content
till värdet flex-start:
.parent {
display: flex;
flex-direction: row-reverse; /* huvudaxel från höger till vänster */
justify-content: flex-start; /* block till början av huvudaxeln */
}
Resultat av kodkörning:
Exempel
Och låt oss nu pressa blocken till slutet av huvudaxeln,
det vill säga till vänster kant. För detta sätter vi justify-content
till värdet flex-end:
.parent {
display: flex;
flex-direction: row-reverse; /* huvudaxel från höger till vänster */
justify-content: flex-end; /* block till slutet av huvudaxeln */
}
Resultat av kodkörning:
Exempel
I tidigare exempel var huvudaxeln riktad horisontellt. Låt oss nu vända på den och rikta den vertikalt.
Låt oss rikta huvudaxeln nedåt, genom att sätta
egenskapen flex-direction till värdet
column.
Låt oss pressa blocken till början av huvudaxeln, det vill säga
till den övre kanten. För detta sätter vi justify-content
till värdet flex-start:
.parent {
display: flex;
flex-direction: column; /* huvudaxel från topp till botten */
justify-content: flex-start; /* block till början av huvudaxeln */
}
Resultat av kodkörning:
Exempel
Låt oss nu pressa blocken till slutet av huvudaxeln,
det vill säga till den nedre kanten. För detta sätter vi justify-content
till värdet flex-end:
.parent {
display: flex;
flex-direction: column; /* huvudaxel från topp till botten */
justify-content: flex-end; /* block till slutet av huvudaxeln */
}
Resultat av kodkörning:
Exempel
Låt oss vända på huvudaxeln, genom att rikta den från botten
och uppåt. För detta sätter vi egenskapen flex-direction
till värdet column-reverse. I
detta fall kommer blocken att byta ordning -
i början av axeln kommer det sista blocket i HTML-koden
att stå.
Låt oss pressa blocken till början av huvudaxeln,
det vill säga till den nedre kanten. För detta sätter vi justify-content
till värdet flex-start:
.parent {
display: flex;
flex-direction: column-reverse; /* huvudaxel från botten till topp */
justify-content: flex-start; /* block till början av huvudaxeln */
}
Resultat av kodkörning:
Exempel
Låt oss pressa blocken till slutet av huvudaxeln,
det vill säga till den övre kanten. För detta sätter vi justify-content
till värdet flex-end:
.parent {
display: flex;
flex-direction: column-reverse; /* huvudaxel från botten till topp */
justify-content: flex-end; /* block till slutet av huvudaxeln */
}
Resultat av kodkörning:
