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 2023-06-30

Sidansvarig för sidan är Styleguide