Flexbox Layout

Dette eksempel viser hvordan man kan bruge flexbox layout til at lave et layout på en webside.

Det består af et enkelt html dokument og en tilhørende css fil.

Her er den html struktur der er brugt.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
  </head>
  <body>
    <div class="top">
      <div class="box">logo</div>
      <div class="box">Main Title</div>
    </div>
    <div class="menu">
      <ul>
        <li>pkt L1</li>
        <li>pkt L2</li>
        <li>pkt L3</li>
        <li>pkt L4</li>
      </ul>
      <ul>
        <li>pkt R1</li>
        <li>pkt R2</li>
      </ul>
    </div>
    <div class="middle">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
      <div class="box">7</div>
      <div class="box">8</div>
      <div class="box">9</div>
    </div>
    <div class="bottom-wrapper">
      <footer class="bottom">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
      </footer>
    </div>
  </body>
</html>

CSS filen ser således ud.

.box {
  background-color: #f1f1f1;
  min-width: 100px;
  margin: 10px;
  padding: 10px;
  text-align: center;
  font-size: 30px;
}

div {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: burlywood;
}

.top {
  display: flex;
  background-color: green;
}

.menu {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: brown;
}

.menu ul {
  display: flex;
  flex-direction: row;
  list-style: none;
  background-color: aqua;
  padding: 0;
}

.menu>ul:last-child {
  display: flex;
  align-items: flex-end;
  list-style: none;
  background-color: purple;
}

.menu li {
  text-align: center;
  padding: 5px;
  margin: 3px;
  border: 2px solid black;
  background-color: olive;
}

.menu li:hover {
  background-color: chartreuse;
}

.middle {
  display: flex;
  flex-wrap: wrap;
}

.bottom-wrapper {
  margin-top: auto;
}

.bottom {
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: space-around;
  background-color: black;
}

Demo

Prøv det kørende eksempel.

Materiale

CSS Flexbox

Eksempler

Spil