Flexbox för layout
Bakgrund
För länge sedan användes tabeller för att strukturera innehållet på webbsidor men det gör vi absolut inte nu.
Ett senare sätt är flytande layout med float. På nätet finns många lösningar på flytande layout med float, clear och overflow. Vill du se mer av det finns det en gammal teorisida under övrigt i menyn.
Ett modernare sätt kom för inte så länge sedan och är "Flexbox"(Flexible Box Module).
Det senaste och nu mest använda är "grid" vilket vi kommer till i nästa moment av kursen.
Flexbox och Grid kan användas tillsammans. Flexbox är lämplig när vi har en endimensionell layout, en rad eller en kolumn. Grid är lämplig för tvådimensionell layout, dvs hantering av både rader och kolumner samtidigt.
Grunder
Börja med att studera den här flexbox-sidan hos flaviocopes.com.
flaviocopes.com/flexbox/ (Enkel, tydlig, snabb genomgång av begrepp)
Har du koll på följande begrepp?
display: flex;
flex-direction:
justify-content:
align-items:
flex-wrap:
align-self:
Titta sen igenom denna sida hos w3schools.com som beskriver samma sak men de har lite olika upplägg.
w3schools: CSS Flexbox (Många små testa själv exempel)
Har du koll på begreppen ovan?
OBS!
Du kanske har observerat att justify-content och align-items, styr olika beroende på om flex-direction är row eller column!
Lite demo exempel med flexbox's justify-content och align-items: 1 2 3 4 5