Flex-layout
Flexlayoutklasser används för att definiera container- eller innehållsstruktur med hjälp av css-flexboxsystemet. Varje klass har sina responsiva underklasser ifall du behöver växla mellan flexklasser beroende på enhetsstorlek. T.ex. l-flex-block md:l-flex-inline lg:l-flex-inline betyder att layouten har flex-block layout som standard och flex-inline på surfplattan och på stationära och större skärmar.
Strukturell layout
Inline layout
Content A
Content A has a child
Content B is a longer text
Content C
Content D much larger text
Block layout
Content A
Content A has a child
Content B is a longer text
Content C
Innehållslayout
Centerjusterat layout
Content A is longer
Content B
Vertikal layout
Content C
Extra long Content C with extra texts and takes up extra space
Content D
Horisontell layout
Content A
Content B
Extra long Content C with extra texts and takes up extra space
Content D
Relativ layout
Höger(1 : N)
Content A
Content A has a child
Content B is a longer text
Vänster(N : 1)
Content A
Content A has a child
Content B is a longer text
Flex wrap
Content A
Content A has a child
Content B is a longer text
Content C
Content D much larger text
Flex no-wrap
Content A
Content A has a child
Content B is a longer text
Content C
Content D much larger text
Flex breddökning
Använd flex ökning för att låta ett flexinnehåll växa för att fylla alla tillgängliga utrymmen.
Ingen ökning
Content A
Content A has a child
Content B is a longer text
Flex grow 0
Öka tillgängligt utrymme
Content A
Content A has a child
Content B is a longer text
Flex grow 1
Öka dubbelt
Flex grow 0
Flex grow 2
Flex grow 1
Flex breddkrympning
Använd flex krympning för att låta ett flexinnehåll krympa om det behövs.
Ingen krympning
Flex grow 2
Flex shrink 0
Flex grow 1
Krymp om det behövs
Flex grow 2
Flex shrink 1
Flex grow 1
Översikt
| Klass | Beskrivning |
|---|---|
| l-flex | Flex layout |
| 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-1-n | Relativ layout höger(1 : N) |
| l-flex-n-1 | Relativ layout vänster(N : 1) |
| l-flex--wrap | Flex wrap |
| l-flex--nowrap | Flex no-wrap |
| 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 |