Justering

Justeringsklasserna används för att justera innehållet horisontellt eller vertikalt.

Om justering

Justeringsklasserna har sina egna responsiva klasser. Till exempel betyder l-align—middle md:l-align—center lg:l-align—top att:

  • l-align—middle är standard
  • md:l-align--center är för surfplattor och uppåt
  • lg:l-align--top är för stationära skärmar och uppåt

Vertikal justering

Top Middle Bottom Baseline Stretch
A
A
A
A
A
HTML
<div class="l-flex exempel-heading">
   <strong>Top</strong>
   <strong>Middle</strong>
   <strong>Bottom</strong>
   <strong>Baseline</strong>
   <strong>Stretch</strong>
</div>
<div class="l-flex-inline">
  <div class="l-align--top example1">
    <div class="a">A</div>
  </div>
  <div class="l-align--middle example1">
    <div class="a">A</div>
  </div>
  <div class="l-align--bottom example1">
    <div class="a">A</div>
  </div>
  <div class="l-align--baseline example1">
    <div class="a">A</div>
  </div>
  <div class="l-align--stretch example2">
    <div class="a">A</div>
  </div>
</div>

Vertikal justering för enstaka element

Top Bottom Middle Baseline Stretch
A
A
A
A
A
HTML
<div class="l-flex exempel-heading">
   <strong>Top</strong>
   <strong>Bottom</strong>
   <strong>Middle</strong>
   <strong>Baseline</strong>
   <strong>Stretch</strong>
</div>
<div class="l-flex-inline">
  <div class="example1">
    <div class="l-align-self--top a">A</div>
  </div>
  <div class="example1">
    <div class="l-align-self--bottom a">A</div>
  </div>
  <div class="example1">
    <div class="l-align-self--middle a">A</div>
  </div>
  <div class="example1">
    <div class="l-align-self--baseline a">A</div>
  </div>
  <div class="example2">
    <div class="l-align-self--stretch a pl-050">A</div>
  </div>
</div>

Horisontell justering

Left Right Center Space-between Space-around Space-evenly
A
A
A
A
B
A
B
A
B
HTML
<div class="l-flex exempel-heading">
   <strong>Left</strong>
   <strong>Right</strong>
   <strong>Center</strong>
   <strong>Space-between</strong>
   <strong>Space-around</strong>
   <strong>Space-evenly</strong>
</div>
<div class="l-flex">
  <div class="l-align--left example3">
    <div class="a">A</div>
  </div>
  <div class="l-align--right example3">
    <div class="a">A</div>
  </div>
  <div class="l-align--center example3">
    <div class="a">A</div>
  </div>
  <div class="l-align--space-between example3">
    <div class="a">A</div>
    <div class="b">B</div>
  </div>
  <div class="l-align--space-around example3">
    <div class="a">A</div>
    <div class="b">B</div>
  </div>
  <div class="l-align--space-evenly example3">
    <div class="a">A</div>
    <div class="b">B</div>
  </div>
</div>

Horisontell justering för enstaka element

Left Right Center Stretch
A
A
A
A
HTML
<div class="l-flex exempel-heading">
   <strong>Left</strong>
   <strong>Right</strong>
   <strong>Center</strong>
   <strong>Stretch</strong>
</div>
<div class="l-flex">
  <div class="example3">
    <div class="l-align-self--left a">A</div>
  </div>
  <div class="example3">
    <div class="l-align-self--right a">A</div>
  </div>
   <div class="example3">
    <div class="l-align-self--center a">A</div>
  </div>
  <!--Only flexbox-->
  <div class="example3">
    <div class="l-align-self--stretch a pl-050">A</div>
  </div>
</div>

Översikt av justeringsklasserna

Justeringsklasserna

Klass

Beskrivning

l-align--top

Anpassar innehållet vertikalt till behållarens början

l-align--middle

Centrerar innehållet vertikalt

l-align--bottom

Anpassar innehållet vertikalt till behållarens slut

l-align--stretch

Justerar innehållet vertikalt för att sträcka sig över allt tillgängligt utrymme

l-align--baseline

Anpassar innehållet vertikalt till behållarens baseline

l-align-self--top

Anpassar sig vertikalt till behållarens början

l-align-self--bottom

Anpassar sig vertikalt till behållarens slut

l-align-self--middle

Centrerar sig vertikalt

l-align-self--stretch

Justerar sig vertikalt så att det sträcker sig över allt tillgängligt utrymme

l-align--left

Anpassar innehållet horisontellt till behållarens början

l-align--right

Anpassar innehållet horisontellt till behållarens slut

l-align--center

Centrerar innehållet horisontellt

l-align--space-between

Justerar innehållet horisontellt så att tomrummet fördelas mellan innehållet

l-align--space-around

Justerar innehållet horisontellt så att tomrummet fördelas runt innehållet

l-align--space-evenly

Anpassar innehållet horisontellt så att tomrummet fördelas jämnt

l-align-self--left

Anpassar sig horisontellt till behållarens vänstersida

l-align-self--right

Anpassar sig horisontellt till behållarens högersida

l-align-self--center

Centrerar sig horisontellt

l-align-self--stretch

Justerar sig horisontellt för att sträcka sig över allt tillgängligt tomrum. Gäller endast flexbox.

l-max-width-080

Sätter maxbredd på alla underordande element till 80 tecken

Senast publicerad

Sidansvarig för sidan är Styleguide