Styleguide

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 style="width: 100px;">Top</strong>
   <strong style="width: 100px;">Middle</strong>
   <strong style="width: 100px;">Bottom</strong>
   <strong style="width: 100px;">Baseline</strong>
   <strong style="width: 100px;">Stretch</strong>
</div>
<div class="l-flex-inline">
  <div class="l-align-top example1" style="width: 100px;height: 100px;border: 1px solid #c3c3c3;display: flex;flex-wrap: wrap;">
    <div class="a" style="background-color: #ebb9b5; text-align: center; border: 1px black dashed; width: 30px; height: 30px;">A</div>
  </div>
  <div class="l-align-middle example1" style="width: 100px;height: 100px;border: 1px solid #c3c3c3;display: flex;flex-wrap: wrap;">
    <div class="a" style="background-color: #ebb9b5; text-align: center; border: 1px black dashed; width: 30px; height: 30px;">A</div>
  </div>
  <div class="l-align-bottom example1" style="width: 100px;height: 100px;border: 1px solid #c3c3c3;display: flex;flex-wrap: wrap;">
    <div class="a" style="background-color: #ebb9b5; text-align: center; border: 1px black dashed; width: 30px; height: 30px;">A</div>
  </div>
  <div class="l-align-baseline example1" style="width: 100px;height: 100px;border: 1px solid #c3c3c3;display: flex;flex-wrap: wrap;">
    <div class="a" style="background-color: #ebb9b5; text-align: center; border: 1px black dashed; width: 30px; height: 30px;">A</div>
  </div>
  <div class="l-align-stretch example2" style="width: 100px;height: 100px;border: 1px solid #c3c3c3;display: flex;flex-wrap: wrap;">
    <div class="a" style="background-color: #ebb9b5; text-align: center; border: 1px black dashed; width: 30px; height: auto;">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 style="width: 100px;">Top</strong>
   <strong style="width: 100px;">Bottom</strong>
   <strong style="width: 100px;">Middle</strong>
   <strong style="width: 100px;">Baseline</strong>
   <strong style="width: 100px;">Stretch</strong>
</div>
<div class="l-flex-inline">
  <div class="example1" style="width: 100px;height: 100px;border: 1px solid #c3c3c3;display: flex;flex-wrap: wrap;">
    <div class="l-align-self-top a" style="background-color: #ebb9b5; text-align: center; border: 1px black dashed; width: 30px; height: 30px;">A</div>
  </div>
  <div class="example1" style="width: 100px;height: 100px;border: 1px solid #c3c3c3;display: flex;flex-wrap: wrap;">
    <div class="l-align-self-bottom a" style="background-color: #ebb9b5; text-align: center; border: 1px black dashed; width: 30px; height: 30px;">A</div>
  </div>
  <div class="example1" style="width: 100px;height: 100px;border: 1px solid #c3c3c3;display: flex;flex-wrap: wrap;">
    <div class="l-align-self-middle a" style="background-color: #ebb9b5; text-align: center; border: 1px black dashed; width: 30px; height: 30px;">A</div>
  </div>
  <div class="example1" style="width: 100px;height: 100px;border: 1px solid #c3c3c3;display: flex;flex-wrap: wrap;">
    <div class="l-align-self-baseline a" style="background-color: #ebb9b5; text-align: center; border: 1px black dashed; width: 30px; height: 30px;">A</div>
  </div>
  <div class="example2" style="width: 100px;height: 100px;border: 1px solid #c3c3c3;display: flex;flex-wrap: wrap;">
    <div class="l-align-self-stretch a pl-050" style="background-color: #ebb9b5; text-align: center; border: 1px black dashed; width: 30px; height: 30px;">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 style="width: 100px;">Left</strong>
   <strong style="width: 100px;">Right</strong>
   <strong style="width: 100px;">Center</strong>
   <strong style="width: 100px;">Space-between</strong>
   <strong style="width: 100px;">Space-around</strong>
   <strong style="width: 100px;">Space-evenly</strong>
</div>
<div class="l-flex">
  <div class="l-align-left example3" style="width: 100px;height: 100px;border: 1px solid #c3c3c3;display: flex;">
    <div class="a" style="background-color: #ebb9b5; text-align: center; border: 1px black dashed; width: 30px; height: 30px;">A</div>
  </div>
  <div class="l-align-right example3" style="width: 100px;height: 100px;border: 1px solid #c3c3c3;display: flex;">
    <div class="a" style="background-color: #ebb9b5; text-align: center; border: 1px black dashed; width: 30px; height: 30px;">A</div>
  </div>
  <div class="l-align-center example3" style="width: 100px;height: 100px;border: 1px solid #c3c3c3;display: flex;">
    <div class="a" style="background-color: #ebb9b5; text-align: center; border: 1px black dashed; width: 30px; height: 30px;">A</div>
  </div>
  <div class="l-align-space-between example3" style="width: 100px;height: 100px;border: 1px solid #c3c3c3;display: flex;">
    <div class="a" style="background-color: #ebb9b5; text-align: center; border: 1px black dashed; width: 30px; height: 30px;">A</div>
    <div class="b" style=" background-color: #b8e1fc;text-align: center;border: 1px black dashed; width: 30px; height: 30px;">B</div>
  </div>
  <div class="l-align-space-around example3" style="width: 100px;height: 100px;border: 1px solid #c3c3c3;display: flex;">
    <div class="a" style="background-color: #ebb9b5; text-align: center; border: 1px black dashed; width: 30px; height: 30px;">A</div>
    <div class="b" style=" background-color: #b8e1fc;text-align: center;border: 1px black dashed; width: 30px; height: 30px;">B</div>
  </div>
  <div class="l-align-space-evenly example3" style="width: 100px;height: 100px;border: 1px solid #c3c3c3;display: flex;">
    <div class="a" style="background-color: #ebb9b5; text-align: center; border: 1px black dashed; width: 30px; height: 30px;">A</div>
    <div class="b" style=" background-color: #b8e1fc;text-align: center;border: 1px black dashed; width: 30px; height: 30px;">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 style="width: 100px;">Left</strong>
   <strong style="width: 100px;">Right</strong>
   <strong style="width: 100px;">Center</strong>
   <strong style="width: 100px;">Stretch</strong>
</div>
<div class="l-flex">
  <div class="example3" style="width: 100px;height: 100px;border: 1px solid #c3c3c3;display: flex;">
    <div class="l-align-self-left a" style="background-color: #ebb9b5; text-align: center; border: 1px black dashed; width: 30px; height: 30px;">A</div>
  </div>
  <div class="example3" style="width: 100px;height: 100px;border: 1px solid #c3c3c3;display: flex;">
    <div class="l-align-self-right a" style="background-color: #ebb9b5; text-align: center; border: 1px black dashed; width: 30px; height: 30px;">A</div>
  </div>
   <div class="example3" style="width: 100px;height: 100px;border: 1px solid #c3c3c3;display: flex;">
    <div class="l-align-self-center a" style="background-color: #ebb9b5; text-align: center; border: 1px black dashed; width: 30px; height: 30px;">A</div>
  </div>
  <!--Only flexbox-->
  <div class="example3" style="width: 100px;height: 100px;border: 1px solid #c3c3c3;display: flex;">
    <div class="l-align-self-stretch a pl-050" style="background-color: #ebb9b5; text-align: center; border: 1px black dashed; width: 30px; height: 30px;">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