Hvorfor

?

• Løser en del problemer grid IKKE gjør
• Lite CSS for dynamiske løsninger
• No golden gun!
• Gjør layout-bygging morsomt

 sin status

Parent

.my-container {
    display: flex;
}

The magic word!

Directions & wrapping

.my-container {
    flex-direction: row;
    flex-wrap: wrap;
    //COMBO!
    flex-flow: row wrap;
}

• Hoved-aksen
• Cross-aksen

Justify content

.my-container {
    justify-content: space-between;
}

Align items

.my-container {
    align-items: baseline;
}

Align content

.my-container {
    align-content: flex-end;
}