Styleguide

Flexbox

Flexlayoutklasser används för att definiera container- eller innehållsstrukturen med hjälp av css-flexboxsystemet.

Om flexbox

Varje klass har sina responsiva underklasser ifall du behöver växla mellan flexklasser beroende på enhetsstorlek. Till exempel betyder l-flex-block md:l-flex-inline att layouten har:

  • flexblocklayout som standard
  • flex-inline på surfplattan och på stationära skärmar och uppåt

Strukturell layout

Inline layout

Inline layout det vill säga horisontell layout.

Innehåll A

Innehåll B innehåller text

Innehåll C har extra text som tar upp utrymme

Innehåll D

Innehåll E

Innehåll F

HTML 
<div class="l-flex-inline">
   <div class="content-style_exempel">
      <p>Innehåll A</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll B innehåller text</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll C har extra text som tar upp utrymme</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll D</p>
   </div>
    <div class="content-style_exempel">
      <p>Innehåll E</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll F</p>
   </div>
</div>

Block layout

Block layout, det vill säga vertikal layout som täcker det tillgängliga utrymmet,

Innehåll A

Innehåll B innehåller text

Innehåll C har extra text som tar upp utrymme

Innehåll D

Innehåll E

Innehåll F

HTML 
<div class="l-flex-block">
   <div class="content-style_exempel">
      <p>Innehåll A</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll B innehåller text</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll C har extra text som tar upp utrymme</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll D</p>
   </div>
    <div class="content-style_exempel">
      <p>Innehåll E</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll F</p>
   </div>
</div>

Innehållslayout

Centrerad layout

Innehåll A

Innehåll B innehåller text

Innehåll C har extra text som tar upp utrymme

Innehåll D

Innehåll E

Innehåll F

HTML 
<div class="l-flex-center">
   <div class="content-style_exempel">
      <p>Innehåll A</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll B innehåller text</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll C har extra text som tar upp utrymme</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll D</p>
   </div>
    <div class="content-style_exempel">
      <p>Innehåll E</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll F</p>
   </div>
</div>

Vertikal layout

Innehåll A

Innehåll B innehåller text

Innehåll C har extra text som tar upp utrymme

Innehåll D

Innehåll E

Innehåll F

HTML 
<div class="l-flex-vertical">
   <div class="content-style_exempel">
      <p>Innehåll A</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll B innehåller text</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll C har extra text som tar upp utrymme</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll D</p>
   </div>
    <div class="content-style_exempel">
      <p>Innehåll E</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll F</p>
   </div>
</div>

Horisontell layout

Innehåll A

Innehåll B innehåller text

Innehåll C har extra text som tar upp utrymme

Innehåll D

Innehåll E

Innehåll F

HTML 
<div class="l-flex-horizontal">
   <div class="content-style_exempel">
      <p>Innehåll A</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll B innehåller text</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll C har extra text som tar upp utrymme</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll D</p>
   </div>
    <div class="content-style_exempel">
      <p>Innehåll E</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll F</p>
   </div>
</div>

Flex wrap

Innehåll A

Innehåll B innehåller text

Innehåll C har extra text som tar upp utrymme

Innehåll D

Innehåll E

Innehåll F

HTML 
<div class="l-flex l-flex--wrap">
     <div class="content-style_exempel">
      <p>Innehåll A</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll B innehåller text</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll C har extra text som tar upp utrymme</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll D</p>
   </div>
    <div class="content-style_exempel">
      <p>Innehåll E</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll F</p>
   </div>
</div>

Flex no-wrap

Innehåll A

Innehåll B innehåller text

Innehåll C har extra text som tar upp utrymme

Innehåll D

Innehåll E

Innehåll F

HTML 
<div class="l-flex l-flex--nowrap">
   <div class="content-style_exempel">
      <p>Innehåll A</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll B innehåller text</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll C har extra text som tar upp utrymme</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll D</p>
   </div>
    <div class="content-style_exempel">
      <p>Innehåll E</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll F</p>
   </div>
</div>

Ökar bredden

Ingen ökning

Innehåll A

Innehåll B

Innehåll C - Flex grow 1

HTML 
<div class="l-flex-horizontal">
   <div class="content-style_exempel">
      <p>Innehåll A</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll B</p>
   </div>
   <div class="l-flex-grow-1 content-style_exempel">
      <p>Innehåll C - Flex grow 1</p>
   </div>
</div>

Öka tillgängligt utrymme

Innehåll A

Innehåll B

Innehåll C - Flex grow 1

HTML 
<div class="l-flex-horizontal">
   <div class="content-style_exempel">
      <p>Innehåll A</p>
   </div>
   <div class="content-style_exempel">
      <p>Innehåll B</p>
   </div>
   <div class="l-flex-grow-1 content-style_exempel">
      <p>Innehåll C - Flex grow 1</p>
   </div>
</div>

Öka dubbelt

Innehåll A - Flex grow 0

Innehåll B - Flex grow 2

Innehåll C - Flex grow 1

HTML 
<div class="l-flex-inline">
   <div class="l-flex-grow-0 content-style_exempel">
      <p>Innehåll A - Flex grow 0</p>
   </div>
   <div class="l-flex-grow-2 content-style_exempel">
      <p>Innehåll B - Flex grow 2</p>
   </div>
   <div class="l-flex-grow-1 content-style_exempel">
      <p>Innehåll C - Flex grow 1</p>
   </div>
</div>

Minskar bredden

Ingen minskning

Innehåll A - Flex grow 2

Innehåll B - Flex shrink 0

Innehåll C - Flex grow 1

HTML 
<div class="l-flex">
   <div class="l-flex-grow-2 content-style_exempel">
      <p>Innehåll A - Flex grow 2</p>
   </div>
   <div class="l-flex-shrink-0 content-style_exempel">
      <p>Innehåll B - Flex shrink 0</p>
   </div>
   <div class="l-flex-grow-1 content-style_exempel">
      <p>Innehåll C - Flex grow 1</p>
   </div>
</div>

Minskar om det behövs

Innehåll A - Flex grow 2

Innehåll B - Flex shrink 1

Innehåll C - Flex grow 1

HTML 
<div class="l-flex">
   <div class="l-flex-grow-2 content-style_exempel">
      <p>Innehåll A - Flex grow 2</p>
   </div>
   <div class="l-flex-shrink-1 content-style_exempel">
      <p>Innehåll B - Flex shrink 1</p>
   </div>
   <div class="l-flex-grow-1 content-style_exempel">
      <p>Innehåll C - Flex grow 1</p>
   </div>
</div>

Viktad layout

Se sidan Färdiga mönster för exempel på viktad layout.

Översikt över flexboxklasserna

Flexboxklasserna

Klass

Beskrivning

l-flex

Flex layout

l-flex-block

Block layout

l-flex-center

Centerjusterat layout

l-flex-inline

Inline layout

l-flex-vertical

Vertikal layout

l-flex-horizontal

Horisontell layout

l-flex--wrap

Flex wrap

l-flex--nowrap

Flex no-wrap

l-flex-1-n

Relativ layout höger(1 : N)

l-flex-n-1

Relativ layout vänster(N : 1)

l-flex-grow-0

Flex breddökning: Ingen ökning

l-flex-grow-1

Flex breddökning: Öka tillgängligt utrymme

l-flex-grow-2

Flex breddökning: Öka dubbelt

l-flex-shrink-0

Flex breddkrympning: Ingen krympning

l-flex-shrink-1

Flex breddkrympning: Krymp om det behövs


Senast publicerad

Sidansvarig för sidan är Styleguide