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