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

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

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

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

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 2024-02-02

Sidansvarig för sidan är Styleguide