Layout justering
Layout justerings klasserna används för att justera innehållet horisontellt eller vertikalt. Alla orienteirngsklasserna har sina egna responsiva klasser. T.ex. md:l-align--center för surfplattor och lg:l-align--top för stationära och större skärmar.
Vertikal justering
Top
Middle
Bottom
Baseline
Stretch
A
A
A
A
A
Vertikal justering för enstaka element
Top
Bottom
Middle
Baseline
Stretch
A
A
A
A
A
Horisontell justering
Left
Right
Center
Space-between
Space-around
Space-evenly
A
A
A
A
B
A
B
A
B
Horisontell justering för enstaka element
Left
Right
Center
Stretch
A
A
A
A
Översikt
| Klass | Beskrivning |
|---|---|
| l-align--top | Anpassa innehållet vertikalt till behållarens start |
| l-align--middle | Centrerar innehållet vertikalt |
| l-align--bottom | Anpassa innehållet vertikalt till behållarens ände |
| l-align--stretch | Justera innehållet vertikalt för att sträcka sig över allt tillgängligt utrymme |
| l-align--baseline | Anpassa innehållet vertikalt till behållarens baseline |
| l-align-self--top | Anpassa själva innehållet vertikalt till behållarens start |
| l-align-self--bottom | Anpassa själva innehållet vertikalt till behållarens ände |
| l-align-self--middle | Centrerar själva innehållet vertikalt |
| l-align-self--stretch | Justera själva innehållet vertikalt för att sträcka sig över allt tillgängligt utrymme |
| l-align--left | Anpassa innehållet horisontellt till behållarens start |
| l-align--right | Anpassa innehållet horisontellt till behållarens ände |
| l-align--center | Centrerar själva innehållet horisontellt |
| l-align--space-between | Justera innehållet horisontellt så att utrymmet fördelas mellan innehållet |
| l-align--space-around | Justera innehållet horisontellt så att utrymmet fördelas runt innehållet |
| l-align--space-evenly | Anpassa innehållet horisontellt så att utrymmet fördelas jämnt innehåll |
| l-align-self--left | Anpassa själva innehållet horisontellt till behållarens vänstersida |
| l-align-self--right | Anpassa själva innehållet horisontellt till behållarens högersida |
| l-align-self--center | Ccentrerar själva innehållet horisontellt |
| l-align-self--stretch | Justera själva innehållet horisontellt för att sträcka sig över allt tillgängligt utrymme. Endast flexbox. |
| l-max-width-080 | Sätter max bredd på alla underordande element till 80ch. |