Flexlayoutklasser används för att definiera container- eller innehållsstrukturen med hjälp av css-flexboxsystemet.
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:
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 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, 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 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å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 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å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 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å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 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å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-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>
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-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>
Innehåll A
Innehåll B
Innehåll C - Flex grow 1
<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>
Innehåll A
Innehåll B
Innehåll C - Flex grow 1
<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>
Innehåll A - Flex grow 0
Innehåll B - Flex grow 2
Innehåll C - Flex grow 1
<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>
Innehåll A - Flex grow 2
Innehåll B - Flex shrink 0
Innehåll C - Flex grow 1
<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>
Innehåll A - Flex grow 2
Innehåll B - Flex shrink 1
Innehåll C - Flex grow 1
<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>
Se sidan Färdiga mönster för exempel på viktad layout.
Klass | Beskrivning |
---|---|
l-flex-inline | Inline layout |
l-flex-block | Block layout |
l-flex-center | Centerjusterat 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