Fusklapp för CSS Flexbox-layout

Flexbox (Flexible Box)-layoutmodellen ger ett mer effektivt sätt att justera och fördela element i en container, även när deras storlek är okänd eller dynamisk.

Flex-container

Set on parent: display: flex; or display: inline-flex;

Egenskap	Beskrivning	Vanliga värden
`flex-direction`	Riktning för huvudaxeln	`row`, `row-reverse`, `column`, `column-reverse`
`flex-wrap`	Radbrytning	`nowrap`, `wrap`, `wrap-reverse`
`flex-flow`	Förkortning för riktning och radbrytning	`row wrap`
`justify-content`	Justering på huvudaxeln	`flex-start`, `flex-end`, `center`, `space-between`, `space-around`
`align-items`	Justering på tväraxeln	`flex-start`, `flex-end`, `center`, `baseline`, `stretch`
`align-content`	Justering av flera rader på tväraxeln	`flex-start`, `flex-end`, `center`, `space-between`, `stretch`

Flex-element

Set on children:

Egenskap	Beskrivning	Standard
`order`	Sorteringsordning (lägre värden kommer först)	`0`
`flex-grow`	Tillväxtfaktor (när utrymme finns)	`0`
`flex-shrink`	Krympfaktor (när utrymme saknas)	`1`
`flex-basis`	Basstorlek före utrymmesfördelning	`auto`
`flex`	Förkortning för grow, shrink och basis	`0 1 auto`
`align-self`	Tillåter individuell justering för ett enskilt element	`auto`

Kärnkoncept

Huvudaxel (Main Axis): Som standard horisontell, definieras av flex-direction.
Tväraxel (Cross Axis): Riktningen vinkelrät mot huvudaxeln.

Scenarieexempel

Horisontell och vertikal centrering

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Jämn breddfördelning

.item {
  flex: 1; /* Upptar resterande utrymme jämnt */
}

Justering mellan ytterkanter

.navbar {
  display: flex;
  justify-content: space-between;
}