Flex
Introduktion
Grid baserat på tekniken display: flex; i css. Flex är både en container för maxbredd och ett underliggande grid med marginaler och tomrum mellan underliggande element.
Komponenterna Grid och Flex har samma innebörd, använd den vars teknik du är mest bekväm med. För komplexa grid kan Grid vara enklare att hantera.
Installation och användning
- npm
- Yarn
- pnpm
npm install @midas-ds/flex
yarn add @midas-ds/flex
pnpm add @midas-ds/flex
import { Flex } from '@midas-ds/flex'
Grid
Grids skalas enligt följande specifikation.
| Skärmstorlek | Margin | Children | Kollumner | Gutter |
|---|---|---|---|---|
| 0 - 767 px | 16 px | Skalas | 1 | 16 px |
| 768 px - 1199 px | 32 px | Skalas | 12 | 16 px |
| 1200 px - 1440 px | 32 px | Skalas | 12 | 24 px |
| > 1440 px | Skalas | 1368 px | 12 | 24 px |
FlexItem
Komponenten <FlexItem> agrerar som direkt child till <Flex>. FlexItem accepterar en prop col som kan ta värdena auto eller 1-12.
Riktlinjer
När ska du använda Flex ?
Flex används för att strukturera upp en sida och placera olika saker i kolumner. Med gridkomponenten får du med dig ovan justeringar för responsivitet samt mellanrum mellan kolumner.
Så här använder du Flex
Använd <Flex></Flex> som komponent och justera de direkt underliggande komponenter till Flex justeras enligt griddets bestämmelser. Justera med barnkomponenten <FlexItem col="antal-kolumner"></FlexItem>.