Een float is een box die naar de linker- of rechterkant 'zweeft'.

Floats of zwevende blokken zijn een boeiend maar soms lastig onderwerp, het resultaat is soms onvoorspelbaar.

De eigenschap float kan de volgende waarden hebben:

  • none (standaard)
  • left
  • right

Afbeeldingen die na de float komen kunnen links of rechts om de float heen lopen. De volgende declaratie is voldoende, om een afbeelding naar links te laten zweven en de tekst er rechts omheen te laten lopen.

article img {
float: right;
width: 50%;
}
article.clearfix {
overflow: auto;
}

Met de clearfix-hack rekent het de hoogte automatisch uit, dit is een het gevolg van de eigenschap float.

Voordat de module Flexbox Layout, waren er vier opmaakmodi:

  • Block, voor secties in een webpagina
  • Inline, voor tekst
  • Tabel (rijen en kolommen)
  • Gepositioneerd expliciete positie van een element (absolute, relative of fixed)

De Flexible Box Layout Module, maakt het makkelijker om flexibel te reageren lay-out structuur te ontwerpen zonder het gebruik van float of positioneren.

Flexbox Elements

Om gebruik te maken van de Flexbox model, moet u eerst een flex container definiëren.

<div class="flex-container">
<div>1 </div>
<div>2 </div>
<div>3 </div>
</div>
.flex-container {
  display: flex;
}

De flexibele container eigenschappen:

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

Leer op een speelse manier je flex-direction via Flexbox frogger.

Hieronder alle bestaande flexbox eigenschappen:

Flex-direction

De flex-direction eigenschap bepaalt in welke richting de flex items wilt.

.flex-container {
  display: flex;
  flex-direction: column;
}

Mogelijke waarden:

  • flex-direction: column;
  • flex-direction: column-reverse;
  • flex-direction: row
  • flex-direction: row-reverse;

Bekijk de voorbeelden hieronder.

Flex-wrap

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

Deze eigenschap zorgt ervoor dat er meerdere rijen of kolommen worden aangemaakt. De waarde no-wrap zorgt ervoor dat het op 1 rij of kolom blijft.

Bekijk de voorbeelden hieronder.

Flex-flow

De flex-flow> is een verkorte eigenschap om zowel de flex-directionen & flex-wrap eigenschappen samen te voegen.

.flex-container {
  display: flex;
  flex-flow: row wrap;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

Bekijk de voorbeelden hieronder.

Justify-content

De justify-content eigenschap wordt gebruikt om de flex items horizontaal uit te lijnen:

.flex-container {
  display: flex;
  justify-content: center;
}

Andere mogelijke waarden zijn:

  • justify-content: flex-start;
  • justify-content: flex-end;
  • justify-content: space-around;
  • justify-content: space-between;

Align-items

De align-items eigenschap wordt gebruikt om de flex items verticaal uit te lijnen.

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
  background-color: DodgerBlue;
}

Andere mogelijke waarden zijn:

  • align-items: flex-start;
  • align-items: flex-end;
  • align-items: stretch; (standaard)
  • align-items: baseline;
    .flex-container {
      display: flex;
      height: 200px;
      align-items: baseline;
      background-color: DodgerBlue;
    }
    .flex-container > div {
      background-color: #f1f1f1;
      width: 100px;
      margin: 10px;
      text-align: center;
      line-height: 75px;
      font-size: 30px;
    }
    

    De basislijn waarde lijnt de flex items uit op de basislijn van de regelafstand (line-height).

De align-content eigenschap wordt gebruikt om de flex rond elkaar uit te lijnen.

Mogelijke waarden zijn:

  • align-content: flex-start;
  • align-content: flex-end;
  • align-content: space-between;
    .flex-container {
      display: flex;
      height: 600px;
      flex-wrap: wrap;
      align-content: space-between;
    }
    
  • align-content: space-around;
  • align-content: stretch;
  • align-content: center;
.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}

Je hebt ook nog andere flex eigenschappen:

  • order
  • flex-grow
  • flex-shrink
  • flex base
  • flex
  • align-self

Ik leg enkel de eigenschap flex hieronder verder uit. Je vindt hier de volledige uitleg op w3school.

Flex

Om een website layout te maken kunnen we ook met de eigenschap flex de breedte per item meegeven. We geven de breedte mee in % of in schaling (1,2,... tov elkaar).

section {
  display: flex;
}
article {
  flex: 1 200px;
}
article:nth-of-type(3) {
  flex: 3 200px;
  display: flex;
  flex-flow: column;
}

Nu voegen we nog een submenu toe aan de 3de div:

article:nth-of-type(3) div:first-child {
  flex:1 100px;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
}
button {
  flex: 1 auto;
  margin: 5px;
  font-size: 18px;
  line-height: 1.5;
}

De uitgewerkte oefening vind je hier.

Responsive weblayout

Bekijk het voorbeeld hier en maak dit eerst na.

<body>

<!-- Note -->
<div style="background:yellow;padding:5px">
  <h4 style="text-align:center">Resize the browser window to see the responsive effect.</h4>
</div>

<!-- Header -->
<header>
  <h1>My Website</h1>
  <p>With a <b>flexible</b> layout.</p>
</header>

<!-- Navigation Bar -->
<nav>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</nav>

<!-- The flexible grid (content) -->
<div class="row">
  <aside">
    <h2>About Me</h2>
    <h5>Photo of me</h5>
    <div class="fakeimg" style="height:200px;">Image</div>
    <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
    <h3>More Text</h3>
    <p>Lorem ipsum dolor sit ame.</p>
    <div class="fakeimg" style="height:60px;">Image</div><br>
    <div class="fakeimg" style="height:60px;">Image</div><br>
    <div class="fakeimg" style="height:60px;">Image</div>
  </aside>

  <main>
    <h2>TITLE HEADING</h2>
    <h5>Title description, Dec 7, 2017</h5>
   <div class="fakeimg" style="height:200px;">Image</div>
    <p>Some text..</p>
    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    <br>
    <h2>TITLE HEADING</h2>
    <h5>Title description, Sep 2, 2017</h5>
    <div class="fakeimg" style="height:200px;">Image</div>
    <p>Some text..</p>
    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
  </main>
</div>

<!-- Footer -->
<footer>
  <h2>Footer</h2>
</footer>

</body>
* {
  box-sizing: border-box;
}

/* Style the body */
body {
  font-family: Arial;
  margin: 0;
}

/* Header/logo Title */
header {
  padding: 60px;
  text-align: center;
  background: #1abc9c;
  color: white;
}

/* Style the top navigation bar */
nav {
  display: flex;
  background-color: #333;
}

/* Style the navigation bar links */
nav a {
  color: white;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}

/* Change color on hover */
nav a:hover {
  background-color: #ddd;
  color: black;
}

/* Column container */
.row {  
  display: flex;
  flex-wrap: wrap;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
aside {
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}

/* Main column */
main {
  flex: 70%;
  background-color: white;
  padding: 20px;
}

/* Fake image, just for this example */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* Footer */
footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  .row, .navbar {   
    flex-direction: column;
  }
}