Transcript
Flexbox is een goede manier om elementen op een rijtje te zetten, heb je alles op een rijtje? Bijvoorbeeld een navigatie aan de bovenkant van een pagina. Bij flexbox zijn er twee concepten die je moet snappen voordat je er mee aan de slag gaat. De as (of axis) en het concept van een container en items.
- As is row of column, dus als je dingen naast elkaar zet spreek je altijd over een row. (horizontaal)
- Als je dingen onder elkaar wilt zetten spreek je altijd over een column. (verticaal)
Daarnaast moet je in flexbox weten wat je container en items zijn. Container is het overkoepelende element, als je daar flexbox opzet worden alle direct children (dus die meteen genest staan) items. Bij internetstandaarden doen we vooral dingen met de container.
Laten we eens in de code duiken. Ik heb hier een lijstje met mijn favoriete hobby's. Het is een ul met list items. Die komen standaard onder elkaar want het zijn block elementen. Ik wil ze naast elkaar zetten.
- Ik zet er display flex op en dingen komen al naast elkaar.
- Met align items kan ik bepalen hoe de ruimte ertussen verspreid. Zo kan ik bijvoorbeeld flex-end doen om ze aan het eind te krijgen. Of center om ze te centreren.
Wat nou als ik een nav om deze ul zou zetten? Wat is dan nu de container? De UL blijft de container. Want als ik flex op de nav zou zetten word de hele ul een flexbox en niet de list items erin. Dus als je elementen gaat nesten vraag je dan elke keer af, wat is m'n container?