centreren met Flexbox

In deze tutorial worden 2 items met flexbox gecentreerd. Dit vindt plaats op de pagina zelf. Daarom moet zowel de html als de body een hoogte krijgen van 100%. Vervolgens geef je de body een display : flex; De vervorming van de items kan dan fors zijn. Geef ze een vaste hoogte mee (hier 12em). De breedte wordt ook vastgelegd met flex: 0 0 12em. Het centreren is nu snel gebeurd: geeft de body een justify-content: center; om ze horizontaal te centreren en een align-items: center; om ze verticaal te centreren. Als je bij smalle vensters de items onder elkaar wenst, geef je de body ook nog een flex-wrap: wrap; mee. Meer over flexbox op: http://blanken5.home.xs4all.nl/cssFlexbox.html