Utforsk CSS Flexbox Layout
Klikk deg gjennom strukturen til en enkel nettside og prøv hvordan de semantiske HTML-elementene oppfører seg når de får flex-egenskaper. Bruk kontrollene for å endre retning og wrapping av innholdet.
HTML-struktur i <body>
- <body>
- <header>
- <span> Logo
- <span> Navigasjon
- <span> Aksjon
- <nav>
- <ul>
- <li>
- <a> Hjem
- <li>
- <a> Layout
- <li>
- <a> Komponenter
- <li>
- <ul>
- <main>
- <article> Artikkel 1
- <article> Artikkel 2
- <article> Artikkel 3
- <article> Artikkel 4
- <article> Artikkel 5
- <article> Artikkel 6
- <aside>
- <section> Nyheter
- <section> Ressurser
- <section> Kontakt
- <footer>
- <span> Informasjon
- <span> Personvern
- <span> Sosiale medier
- <header>
Tips: velg et element i visualiseringen for å aktivere flex og juster verdiene nedenfor.
Visualisering
Klikk på en boks for å slå flex av eller på. Du kan aktivere flere elementer samtidig for å se hvordan layouten endres.
Flex-innstillinger
Velg et element i visualiseringen for å justere flex-egenskapene.