Dit artikel laat zien hoe u tekst in een flexbox verticaal kunt uitlijnen:
Methode 1: de eigenschap 'item-uitlijnen' gebruiken
Om tekst verticaal uit te lijnen, kunnen gebruikers de ' uitlijn-item ” eigenschap geleverd door CSS. Het helpt de elementen om hun uitlijning in de flexbox in te stellen. De mogelijke verticale uitlijningsposities kunnen zich bevinden aan de “ bovenkant ”, midden ', of ' onderkant ' kant.
De praktische demonstraties voor het uitlijnen van elementen in deze richtingen staan hieronder vermeld:
Voorbeeld 1: Toppositie
Om de tekst in de flexbox in de bovenste positie uit te lijnen, drukt u op de ' flex-start ” waarde wordt verstrekt aan de “ uitlijnen-items ' eigendom. Deze eigenschap wordt toegewezen aan de hoofd-div die wordt weergegeven als flex. Laten we aannemen, de div met een klasse van ' verticaal ' wordt gemaakt in het HTML-bestand. Selecteer vervolgens in het CSS-bestand die klasse en wijs de volgende eigenschappen toe:
.verticaal {
kleur : wit ;
hoogte : 150px ;
weergave : buigen ;
padding-links : 20px ;
uitlijnen-items : flex-start ;
Achtergrond kleur : Bos Groen ;
}
- Eerst wordt de basisstijl en uitlijning aan de div gegeven met behulp van kleur-, achtergrondkleur- en hoogte-eigenschappen van CSS.
- De eigenschap 'display' is ook ingesteld op 'flex' om er een flexbox van te maken.
- Ten slotte, om de tekst aan het begin van de flexbox weer te geven, stelt u de eigenschap 'align-items' in op 'flex-start.
Na het uitvoeren van bovenstaande code ziet de webpagina er als volgt uit:
De uitvoer geeft aan dat de tekst nu is uitgelijnd op de bovenste positie in de flexbox.
Voorbeeld 2: Middenpositie
Om de tekst verticaal in het midden uit te lijnen, stelt u de ' centrum ' waarde aan de CSS ' uitlijnen-items ' eigendom:
.verticaal {kleur : wit ;
hoogte : 150px ;
weergave : buigen ;
padding-links : 20px ;
uitlijnen-items : centrum ;
Achtergrond kleur : Bos Groen ;
}
Na het uitvoeren van bovenstaande code:
De bovenstaande uitvoer geeft aan dat de tekst nu is uitgelijnd in het midden van de flexbox.
Voorbeeld 3: Bodempositie
Om de tekst onderaan de flexbox in te stellen, wijst u de ' flex-einde ” waarde naar de “ uitlijnen-items ' eigendom. Deze keer wordt de tekst uitgelijnd op de positie waar de flexbox eindigt, dus aan de onderkant:
.verticaal {kleur : wit ;
hoogte : 150px ;
weergave : buigen ;
padding-links : 20px ;
uitlijnen-items : flex-einde ;
Achtergrond kleur : Bos Groen ;
}
Na het uitvoeren van bovenstaande code ziet de webpagina er als volgt uit:
De bovenstaande uitvoer geeft aan dat de tekst nu verticaal is uitgelijnd in de onderste positie.
Methode 2: Eigenschap 'justify-content' gebruiken
De ' rechtvaardigen-inhoud ” eigenschap kan ook worden gebruikt om de tekst in de flexbox verticaal uit te lijnen. Het werkt echter hetzelfde als de ' tekst uitlijnen ” eigenschap en het lijnt elementen uit in de rijrichting. Dus, om de uitlijnrichting te veranderen, de ' flex-richting ” eigenschap wordt gebruikt om de “ rechtvaardigen-inhoud 'afstemming op' kolom ” richting:
.verticaal {hoogte : 150px ;
weergave : buigen ;
padding-links : 20px ;
kleur : wit ;
Achtergrond kleur : donkercyaan ;
flex-richting : kolom ;
rechtvaardigen-inhoud : flex-einde ;
}
De uitleg van de bovenstaande code wordt hieronder gegeven:
- De ' hoogte ”, “ kleur ' En ' padding-links ” eigenschappen werken net als de bovenstaande methode.
- Stel daarna de ' kolom ” waarde naar de “ flex-richting ” van de flexbox om stijlen toe te passen via kolommen.
- Daarna is de “ rechtvaardigen-inhoud ” eigenschap lijnt de tekst verticaal uit.
- Op het einde, de “ flex-einde ” waarde lijnt het element uit op de “ onderkant ' kant.
Opmerking : Gebruikers kunnen ook instellen “ flex-start ' En ' centrum ” waarden naar de “ bovenkant ', En ' midden ” kanten, respectievelijk.
Na het uitvoeren van de bovenstaande code ziet de webpagina er bijvoorbeeld zo uit:
De bovenstaande uitvoer geeft aan dat de tekst is uitgelijnd aan de onderkant van de flexbox.
Conclusie
Om de tekst in een flexbox verticaal uit te lijnen, gebruikt u de ' uitlijnen-items ' En ' rechtvaardigen-inhoud CSS-eigenschappen kunnen worden gebruikt. Beide eigenschappen krijgen ' flex-start ”, “ centrum ' of ' flex-einde ” waarden om de tekst uit te lijnen op “ bovenkant ”, “ midden ' En ' onderkant ” richtingen in de flexbox, respectievelijk. Dit artikel heeft de verticale uitlijning van tekst in een flexbox gedemonstreerd.