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 style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll A</p>
   </div>
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll B innehåller text</p>
   </div>
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll C har extra text som tar upp utrymme</p>
   </div>
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll D</p>
   </div>
    <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll E</p>
   </div>
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">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 style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll A</p>
   </div>
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll B innehåller text</p>
   </div>
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll C har extra text som tar upp utrymme</p>
   </div>
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll D</p>
   </div>
    <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll E</p>
   </div>
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">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 style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll A</p>
   </div>
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll B innehåller text</p>
   </div>
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll C har extra text som tar upp utrymme</p>
   </div>
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll D</p>
   </div>
    <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll E</p>
   </div>
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">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 style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll A</p>
   </div>
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll B innehåller text</p>
   </div>
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll C har extra text som tar upp utrymme</p>
   </div>
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll D</p>
   </div>
    <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll E</p>
   </div>
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">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 style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll A</p>
   </div>
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll B innehåller text</p>
   </div>
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll C har extra text som tar upp utrymme</p>
   </div>
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll D</p>
   </div>
    <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll E</p>
   </div>
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">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 style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll A</p>
   </div>
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll B innehåller text</p>
   </div>
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll C har extra text som tar upp utrymme</p>
   </div>
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll D</p>
   </div>
    <div cstyle="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll E</p>
   </div>
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">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 style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll A</p>
   </div>
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll B innehåller text</p>
   </div>
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll C har extra text som tar upp utrymme</p>
   </div>
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll D</p>
   </div>
    <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll E</p>
   </div>
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">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 style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll A</p>
   </div>
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll B</p>
   </div>
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">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 style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll A</p>
   </div>
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll B</p>
   </div>
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">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 style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll A - Flex grow 0</p>
   </div>
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll B - Flex grow 2</p>
   </div>
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">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 style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll A - Flex grow 2</p>
   </div>
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll B - Flex shrink 0</p>
   </div>
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">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 style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll A - Flex grow 2</p>
   </div>
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll B - Flex shrink 1</p>
   </div>
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll C - Flex grow 1</p>
   </div>
</div>

Viktad layout

Höger (1:N)

Innehåll A

Innehåll A2

Innehåll B med lite mer text

HTML 
<div class="l-flex-1-n">
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll A</p>
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll A2</p>
   </div>
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll B med lite mer text</p>
   </div>
</div>

Vänster (N:1)

Innehåll A

Innehåll A2

Innehåll B med lite mer text

HTML 
<div class="l-flex-n-1">
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll A</p>
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll A2</p>
   </div>
   <div style="background-color: transparent;background-image: linear-gradient(135deg, #b3b3b3 10%, transparent 10%, transparent 50%, #b3b3b3 50%, #b3b3b3 60%, transparent 60%, transparent 100%);background-size: 7.07px 7.07px;padding: 0.5rem;">
      <p style="background-color: #fff; color: #991f14;padding: 0.25rem;">Innehåll B med lite mer text</p>
   </div>
</div>

Ö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