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

<div id="wrapper">
- <header>
  - <span>Logo</span>
  - <span>Navigasjon</span>
  - <span>Aksjon</span>
  </header>
- <nav>
  - <ul>
    - <li>
      - <a>Hjem</a>
      </li>
    - <li>
      - <a>Layout</a>
      </li>
    - <li>
      - <a>Komponenter</a>
      </li>
    </ul>
  </nav>
- <main>
  - <article>Artikkel 1</article>
  - <article>Artikkel 2</article>
  - <article>Artikkel 3</article>
  - <article>Artikkel 4</article>
  - <article>Artikkel 5</article>
  - <article>Artikkel 6</article>
  </main>
- <aside>
  - <section>Nyheter</section>
  - <section>Ressurser</section>
  - <section>Kontakt</section>
  </aside>
- <footer>
  - <span>Informasjon</span>
  - <span>Personvern</span>
  - <span>Sosiale medier</span>
  </footer>
</div>

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

Hele nettsidelayout lages med en flexbox på #wrapper, men her undersøkes metoden for å bruke flere flexboxer i tillegg til denne. De semantiske elementene (header, nav, main, etc.) vises ikke med grønn skrift, selv om disse er flex-elementer til #wrapper, for å fokusere på flere flexbox-nivåer i layouten.

Velg et element i visualiseringen for å justere flex-egenskapene.