n00b pro

04. CSS layout

Dit hoofdstuk is onderdeel van de cursus CSS. Andere cursussen in dezelfde reeks: HTML, Javascript, C#, Ontwikkelomgeving.

Youtube totaaldemo

Deze video's maken deel uit van een HTML + CSS totaaldemo uit de Basic Web Development playlist, die begint met de video BWD 01. HTML - deel 8: praktijkdemo

Pagina layout

https://www.youtube.com/watch?v=JfHd3XhmAdM

Main content

https://www.youtube.com/watch?v=RPXtQXj_kP4

Andere pagina's

https://www.youtube.com/watch?v=GMuXRIdg8_s

Carousel

https://www.youtube.com/watch?v=YrYdEKBo7c8

Layout technieken overzicht

CSS heeft een lange weg afgelegd; pas met het verdwijnen van oude browsers konden Flexbox en Grid gebruikt worden, de eerste echte layout technieken in CSS.

Je kan layouttechnieken onderverdelen in ruwweg 5 groepen:

→ je kan layouts vaak met verschillende technieken oplossen, maar Flexbox is je standaardtechniek
→ bestudeer zeker nog eerst grondig de display property in vorig deel; veel kleine layoutproblemen kan je daar al mee oplossen

Alignering

Content horizontaal centreren

Om tekst, afbeeldingen enz... horizontaal te aligneren, gebruik text-align op de parent: 

<div id="parent">
    <img src="img/04_layout/spongebob.webp" alt="">
    <p>parmesan cheese slices when the cheese comes out everybody's happy cow cheese and wine cheese and biscuits. Roquefort when the cheese comes out...</p>
</div>
/* alignering content */
.container {
  text-align: center; /* probeer ook left, right */
}

/* andere stijlen */
.container {
   background-color: #fdd;
   padding: 20px;
   height: 350px;
}
.visual {
   width: 80px;
}
p {
   background-color: #fff9;
   border: 1px solid #ccc;
   padding: 5px;
}

parmesan cheese slices when the cheese comes out everybody's happy cow cheese and wine cheese and biscuits. Roquefort when the cheese comes out...

Block horizontaal centreren

Om blocklevel content (<div>, <p>...) horizontaal te aligneren, gebruik je de waarde auto voor margin-left en/of margin-right op het element zelf: 

<div id="parent">
   <p>parmesan cheese slices when the cheese comes out everybody's happy cow cheese and wine cheese and biscuits. Roquefort when the cheese comes out...</p>
</div>
/* horizontale alignering blok */
p {
   margin-left: auto;
   margin-right: auto; /* probeer ook 0px */
   width: 300px;
}

/* andere stijlen */
.container {
   background-color: #fdd;
   height: 350px;
   padding: 20px;
}
p {
   background-color: #fff9;
   border: 1px solid #ccc;
   padding: 5px;
}

parmesan cheese slices when the cheese comes out everybody's happy cow cheese and wine cheese and biscuits. Roquefort when the cheese comes out...

Regel verticaal centreren

Een oud trukje om één regel verticaal te centreren is height en line-height dezelfde waarde geven:

<a href="">button tekst </a>
/* button layout */
.button {
   display: inline-block; /* anders kan je geen hoogte instellen */
   height: 60px; /* zelfde waarde */
   line-height: 60px; /* zelfde waarde */
   text-align: center; /* centreer horizontaal */
   white-space: nowrap; /* vermijd line breaks */
   width: 120px;
}

/* button styling */
.button {
   background-color: beige;
   border: 2px solid #ccc;
   cursor: pointer;
   display: inline-block;
}

Blok verticaal centreren

Als de hoogte van de container flexibel is en er maar één blok is, kan je verticaal centreren met padding op de parent:

<div id="parent">
   <p>parmesan cheese slices when the cheese comes out everybody's happy cow cheese and wine cheese and biscuits. Roquefort when the cheese comes out...</p>
</div>
/* verticale alignering blok */
.container {
   padding: 50px 20px; /* verticaal horizontaal */
}

/* andere stijlen */
.container {
   background-color: #fdd;
}
p {
   background-color: #fff9;
   border: 1px solid #ccc;
   padding: 5px;
}

parmesan cheese slices when the cheese comes out everybody's happy cow cheese and wine cheese and biscuits. Roquefort when the cheese comes out...

Je ziet, de mogelijkheden zijn beperkt: verticaal centreren van meerdere blokken of wanneer de container een vaste hoogte heeft, is enkel mogelijk met flexbox.

Floating

Standaard weergave

Blocklevel elementen als <h3> en <p> starten standaard op een nieuwe regel:

<div id="wrapper">
  <section>
    <img src="img/04_layout/portrait.jpg" alt="foto">
    <h3>Procured</h3>
    <p>Civility not absolute put continue. Overcame breeding or my concerns removing desirous so absolute. My melancholy unpleasing imprudence considered in advantages so impression. Almost unable put piqued talked likely houses her met.</p>
  </section>
  <section>
    <h3>Finished</h3>
    <p>Her are its honoured drawings nor. Pretty see mutual thrown all not edward ten. Particular an boisterous up he reasonably frequently. Several any had enjoyed shewing studied two. Up intention remainder sportsmen behaviour ye happiness. Few again any alone style added abode ask.</p>
  </section>
</div>
img {
   width: 70px;
}
section {
   border: 1px dotted;
   margin-bottom: 10px;
   padding: 5px
}
h3 {
   margin: 0;
   margin-bottom: 0.5rem
}
.demowrapper {
   font-family: 'Roboto', sans-serif;
   max-width: 400px;
}
foto

Procured

Civility not absolute put continue. Overcame breeding or my concerns removing desirous so absolute. My melancholy unpleasing imprudence considered in advantages so impression. Almost unable put piqued talked likely houses her met.

Finished

Her are its honoured drawings nor. Pretty see mutual thrown all not edward ten. Particular an boisterous up he reasonably frequently. Several any had enjoyed shewing studied two. Up intention remainder sportsmen behaviour ye happiness. Few again any alone style added abode ask.

Floaten

Met float: left; kan je blocklevel elementen rond een afbeelding laten vloeien:

<div id="wrapper">
  <section>
    <img src="img/04_layout/portrait.jpg" alt="foto">
    <h3>Procured</h3>
    <p>Civility not absolute put continue. Overcame breeding or my concerns removing desirous so absolute. My melancholy unpleasing imprudence considered in advantages so impression. Almost unable put piqued talked likely houses her met.</p>
  </section>
  <section>
    <h3>Finished</h3>
    <p>Her are its honoured drawings nor. Pretty see mutual thrown all not edward ten. Particular an boisterous up he reasonably frequently. Several any had enjoyed shewing studied two. Up intention remainder sportsmen behaviour ye happiness. Few again any alone style added abode ask.</p>
  </section>
</div>
img {
   float: left; /* probeer ook float: right; */
   margin-right: 10px;
   width: 70px;
}
section {
   border: 1px dotted;
   margin-bottom: 10px;
   padding: 5px
}
h3 {
   margin: 0;
   margin-bottom: 0.5rem
}
.demowrapper {
   max-width: 400px;
   font-family: 'Roboto', sans-serif;
}
foto

Procured

Civility not absolute put continue. Overcame breeding or my concerns removing desirous so absolute. My melancholy unpleasing imprudence considered in advantages so impression. Almost unable put piqued talked likely houses her met.

Finished

Her are its honoured drawings nor. Pretty see mutual thrown all not edward ten. Particular an boisterous up he reasonably frequently. Several any had enjoyed shewing studied two. Up intention remainder sportsmen behaviour ye happiness. Few again any alone style added abode ask.

Dit werkt ook met andere block-elementen als pullquotes:

<section>
  <h3>Procured</h3>
  <p> Civility not absolute put continue. Overcame breeding or my concerns removing desirous so absolute. My melancholy unpleasing imprudence considered in advantages so impression. My melancholy unpleasing imprudence considered in advantages so impression.</p>
  <aside>
    spoke as as other again ye; Hard on to roof he drew
  </aside>
  <p>Her are its honoured drawings nor. Pretty see mutual thrown all not edward ten. Particular an boisterous up he reasonably frequently. Several any had enjoyed shewing studied two. Up intention remainder sportsmen behaviour ye happiness. Few again any alone style added abode ask. Nay projecting unpleasing boisterous eat discovered solicitude. Own six moments produce elderly pasture far arrival. Hold our year they ten upon. Gentleman contained so intention sweetness in on resolving.</p>
</section>

/* float pull quote right */
aside {
   float: right;
   margin: 10px 0 10px 10px;
   width: 130px;
}

/* rest of CSS */
aside {
   background-color: #eee;
   font-size: 1.2em;
   font-style: italic;
   padding: 10px;
}

h3, p {
   margin: 0;
   margin-bottom: 0.5rem
}
section {
   max-width: 400px;
   font-family: 'Roboto', sans-serif;
   border: 1px dotted;
   padding: 5px
}

Procured

Civility not absolute put continue. Overcame breeding or my concerns removing desirous so absolute. My melancholy unpleasing imprudence considered in advantages so impression. My melancholy unpleasing imprudence considered in advantages so impression.

Her are its honoured drawings nor. Pretty see mutual thrown all not edward ten. Particular an boisterous up he reasonably frequently. Several any had enjoyed shewing studied two. Up intention remainder sportsmen behaviour ye happiness. Few again any alone style added abode ask. Nay projecting unpleasing boisterous eat discovered solicitude. Own six moments produce elderly pasture far arrival. Hold our year they ten upon. Gentleman contained so intention sweetness in on resolving.

Parent bleeding

Als een gefloat element niet meer in de parent past, zal het eruit lekken en de content van het volgende blok wegdrukken:

<div id="wrapper">
  <section>
    <img src="img/04_layout/portrait.jpg" alt="foto">
    <h3>Procured</h3>
    <p>Civility not absolute put continue. Overcame breeding or my concerns removing desirous so absolute. </p>
  </section>
  <section>
    <h3>Finished</h3>
    <p>Her are its honoured drawings nor. Pretty see mutual thrown all not edward ten. Particular an boisterous up he reasonably frequently. Several any had enjoyed shewing studied two. Up intention remainder sportsmen behaviour ye happiness. Few again any alone style added abode ask.</p>
  </section>
</div>
/* float image links */
img {
  float: left;
  margin-right: 10px;
  width: 160px;
}

/* rest van de CSS */
section {
  margin: 10px;
  border: 1px dotted;
  padding: 5px;
}
h3, p {
  margin: 0;
  margin-bottom: 0.5rem
}
#wrapper {
  max-width: 500px;
  font-family: 'Roboto', sans-serif;
}
foto

Procured

Civility not absolute put continue. Overcame breeding or my concerns removing desirous so absolute.

Finished

Her are its honoured drawings nor. Pretty see mutual thrown all not edward ten. Particular an boisterous up he reasonably frequently. Several any had enjoyed shewing studied two. Up intention remainder sportsmen behaviour ye happiness. Few again any alone style added abode ask.

Dit lijkt vreemd, maar eigenlijk is het niet onlogisch voor waar floating voor bedoeld is: tekst laten vloeien rond afbeeldingen. Het alternatief is een grote leegte tussen de twee paragrafen.

Parent herstellen

Als je niet wil, kan je de parent herstellen met overflow: hidden;:

<div id="wrapper">
  <section>
    <img src="img/04_layout/portrait.jpg" alt="foto">
    <h3>Procured</h3>
    <p>Civility not absolute put continue. Overcame breeding or my concerns removing desirous so absolute. </p>
  </section>
  <section>
    <h3>Finished</h3>
    <p>Her are its honoured drawings nor. Pretty see mutual thrown all not edward ten. Particular an boisterous up he reasonably frequently. Several any had enjoyed shewing studied two. Up intention remainder sportsmen behaviour ye happiness. Few again any alone style added abode ask.</p>
  </section>
</div>
/* vermijd parent bleeding */
section {
   overflow: hidden;
}

/* float image links */
img {
  float: left;
  margin-right: 10px;
  width: 160px;
}

/* rest of CSS */
section {
  margin: 10px;
  border: 1px dotted;
  padding: 5px;
}
h3, p {
  margin: 0;
  margin-bottom: 0.5rem
}
#wrapper {
  max-width: 500px;
  font-family: 'Roboto', sans-serif;
}
foto

Procured

Civility not absolute put continue. Overcame breeding or my concerns removing desirous so absolute.

Finished

Her are its honoured drawings nor. Pretty see mutual thrown all not edward ten. Particular an boisterous up he reasonably frequently. Several any had enjoyed shewing studied two. Up intention remainder sportsmen behaviour ye happiness. Few again any alone style added abode ask.

Clear

Je kan vermijden dat bepaalde elementen naast een gefloat element komen met clear (waarden left, right of both), bv. de tweede titel, die nu onder de afbeelding blijft:

<div id="wrapper">
  <section id="sect1">
    <img src="img/04_layout/portrait.jpg" alt="foto">
    <h3>Procured</h3>
    <p>Civility not absolute put continue. Overcame breeding or my concerns removing desirous so absolute. </p>
  </section>
  <section id="sect2">
    <h3>Finished</h3>
    <p>Her are its honoured drawings nor. Pretty see mutual thrown all not edward ten. Particular an boisterous up he reasonably frequently. Several any had enjoyed shewing studied two. Up intention remainder sportsmen behaviour ye happiness. Few again any alone style added abode ask.</p>
  </section>
</div>
/* clear tweede titel */
#sect2 h3 {
  clear: left;
}

/* float image links */
img {
  float: left;
  margin-right: 10px;
  width: 160px;
}

/* rest of CSS */
section {
  margin: 10px;
  border: 1px dotted;
  padding: 5px;
}
h3, p {
  margin: 0;
  margin-bottom: 0.5rem
}
#wrapper {
  max-width: 500px;
  font-family: 'Roboto', sans-serif;
}
foto

Procured

Civility not absolute put continue. Overcame breeding or my concerns removing desirous so absolute.

Finished

Her are its honoured drawings nor. Pretty see mutual thrown all not edward ten. Particular an boisterous up he reasonably frequently. Several any had enjoyed shewing studied two. Up intention remainder sportsmen behaviour ye happiness. Few again any alone style added abode ask.

Wanneer gebruiken

Vóór Flexbox algemeen ondersteund werd, werd float misbruikt voor alle layout (en soms kom je het nog tegen), maar vandaag beperk je het gebruik best waarvoor het bedoeld is. Gebruik floating:

Gebruik floating niet:

De vuistregel is: als het anders kan (b.v. met flexbox), gebruik dan geen floating

Flexbox

Met flexbox kan je een reeks children, de flex items, schikken in een parent, de flex container. Het meest complete overzicht op het net vind je op https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

Flexbox properties overzicht

De CSS properties voor de flex container:

eigenschap waarden betekenis
display flex|inline-flex layouten met flex als blockevel of inline element
flex-direction row|column|row-reverse|column-reverse stapelen in rijen of kolommen, al dan niet in omgekeerde richting
flex-wrap wrap|nowrap items op één lijn of meerdere lijnen
flex-flow combinatie van flex-direction en flex-wrap, b.v. flex-flow: row nowrap;
align-content flex-start|center|space-between|flex-end|stretch|... schikking van de flex lijnen in de flex container
align-items flex-start|center|space-between|flex-end|stretch|... schikking van items dwars op de lijnen
justify-content flex-start|center|space-between|flex-end|stretch|... schikking van items langs de lijnen
gap, column-gap, row-gap px|%|... ruimte tussen items/lijnen

De CSS properties voor het flex item:

eigenschap waarden betekenis
align-self flex-start|center|space-between|flex-end|stretch|... overschrijft align-items property voor dit item
order geheel getal volgorde van het item in de lijn
flex-grow geheel getal hoeveel het item groeit (indien nodig) proportioneel t.o.v. andere items
flex-shrink geheel getal hoeveel het item krimpt (indien nodig) proportioneel t.o.v. andere items
flex-basis px|%|... initiële afmeting van het item
flex getal getal px|%|... hoe snel een item groeit, krimpt en intiële afmeting combinatie van flex-grow, flex-shrink en flex-basis, b.v. flex: 1 1 200px;

Flex container

startcode

We starten van een container met 10 items van afwisselende afmetingen. De standaard weergave, zonder layout: 

<div class="flex-container">
   <div class="flex-item">01</div>
   <div class="flex-item">02</div>
   <div class="flex-item">03</div>
   <div class="flex-item">04</div>
   <div class="flex-item">05</div>
   <div class="flex-item">06</div>
   <div class="flex-item">07</div>
   <div class="flex-item">08</div>
   <div class="flex-item">09</div>
   <div class="flex-item">10</div>
</div>

.flex-item {
   background-color: #ddd;
   border: 2px solid black;
   padding: 5px;
   text-align: center;
}

.flex-item:nth-child(even) {
   height: 60px;
   line-height: 45px;
   width: 100px;
}

.flex-item:nth-child(odd) {
   height: 40px;
   line-height: 25px;
   width: 60px;
}

.flex-container {
   background-color: #ddf;
   border: 1px dotted black;
   max-width: 500px;
   padding: 20px;
}
01
02
03
04
05
06
07
08
09
10

display: flex

Met display: flex maak je van de container een flex container. Ze komen standaard op één rij, samengeperst indien nodig:

.flex-container {
   display: flex; /* maak flex container */
}

/* box styles */
.flex-item {
   background-color: #ddd;
   border: 2px solid black;
   padding: 5px;
   text-align: center;
}

.flex-item:nth-child(even) {
   height: 60px;
   line-height: 45px;
   width: 100px;
}

.flex-item:nth-child(odd) {
   height: 40px;
   line-height: 25px;
   width: 60px;
}

.flex-container {
   background-color: #ddf;
   border: 1px dotted black;
   height: 335px;
   max-width: 500px;
   padding: 20px;
}
01
02
03
04
05
06
07
08
09
10

gap

Geef ruimte tussen kolommen/rijen met gap:

.flex-container {
   display: flex;
   gap: 10px; /* ruimte tussen kolommen en rijen */
}

/* box styles */
.flex-item {
   background-color: #ddd;
   border: 2px solid black;
   padding: 5px;
   text-align: center;
}

.flex-item:nth-child(even) {
   height: 60px;
   line-height: 45px;
   width: 100px;
}

.flex-item:nth-child(odd) {
   height: 40px;
   line-height: 25px;
   width: 60px;
}

.flex-container {
   background-color: #ddf;
   border: 1px dotted black;
   height: 335px;
   max-width: 500px;
   padding: 20px;
}
01
02
03
04
05
06
07
08
09

flex-wrap

Sta meerdere lijnen toe met flex-wrap (en dan hoeven ze niet meer samengeperst te worden):

.flex-container {
   display: flex;
   flex-wrap: wrap; /* items op meerdere lijnen */
   gap: 10px;
}

/* box styles */
.flex-item {
   background-color: #ddd;
   border: 2px solid black;
   padding: 5px;
   text-align: center;
}

.flex-item:nth-child(even) {
   height: 60px;
   line-height: 45px;
   width: 100px;
}

.flex-item:nth-child(odd) {
   height: 40px;
   line-height: 25px;
   width: 60px;
}

.flex-container {
   background-color: #ddf;
   border: 1px dotted black;
   height: 335px;
   max-width: 500px;
   padding: 20px;
}
01
02
03
04
05
06
07
08
09

align-content

Zet de volledige content aan het begin, het midden, einde, uitgespreid e.d. met align-content:

.flex-container {
   align-content: center; /* probeer ook flex-start, flex-end... */
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}

/* box styles */
.flex-item {
   background-color: #ddd;
   border: 2px solid black;
   padding: 5px;
   text-align: center;
}

.flex-item:nth-child(even) {
   height: 60px;
   line-height: 45px;
   width: 100px;
}

.flex-item:nth-child(odd) {
   height: 40px;
   line-height: 25px;
   width: 60px;
}

.flex-container {
   background-color: #ddf;
   border: 1px dotted black;
   height: 335px;
   max-width: 500px;
   padding: 20px;
}
01
02
03
04
05
06
07
08
09

align-items

Aligneer items op hun lijnen met align-items:

.flex-container {
   align-content: center;
   align-items: center; /* probeer ook flex-start, flex-end... */
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}

/* box styles */
.flex-item {
   background-color: #ddd;
   border: 2px solid black;
   padding: 5px;
   text-align: center;
}

.flex-item:nth-child(even) {
   height: 60px;
   line-height: 45px;
   width: 100px;
}

.flex-item:nth-child(odd) {
   height: 40px;
   line-height: 25px;
   width: 60px;
}

.flex-container {
   background-color: #ddf;
   border: 1px dotted black;
   height: 335px;
   max-width: 500px;
   padding: 20px;
}
01
02
03
04
05
06
07
08
09

justify-content

Bepaal de spreiding langs de lijnen: aan het begin, in het midden, op het einde, zo ver mogelijk uit elkaar... met justify-content:

.flex-container {
   align-content: center;
   align-items: center;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between; /* zo ver mogelijk uit elkaar */
   gap: 10px;
}

/* box styles */
.flex-item {
   background-color: #ddd;
   border: 2px solid black;
   padding: 5px;
   text-align: center;
}

.flex-item:nth-child(even) {
   height: 60px;
   line-height: 45px;
   width: 100px;
}

.flex-item:nth-child(odd) {
   height: 40px;
   line-height: 25px;
   width: 60px;
}

.flex-container {
   background-color: #ddf;
   border: 1px dotted black;
   height: 335px;
   max-width: 500px;
   padding: 20px;
}
01
02
03
04
05
06
07
08
09

flex-direction

Zet items in kolommen i.p.v. rijen met flex-direction:

.flex-container {
   align-content: center;
   align-items: center;
   display: flex;
   flex-direction: column; /* row (default) of column */
   flex-wrap: wrap;
   gap: 20px 5px;
}

/* box styles */
.flex-item {
   background-color: #ddd;
   border: 2px solid black;
   padding: 5px;
   text-align: center;
}

.flex-item:nth-child(even) {
   height: 60px;
   line-height: 45px;
   width: 100px;
}

.flex-item:nth-child(odd) {
   height: 40px;
   line-height: 25px;
   width: 60px;
}

.flex-container {
   background-color: #ddf;
   border: 1px dotted black;
   height: 350px;
   max-width: 500px;
   padding: 20px;
}
01
02
03
04
05
06
07
08
09

Flex item

startcode

We starten van een flex container, met items op één rij, bovenaan de container geplaatst met align-items: flex-start:

.flex-container {
   align-items: flex-start;
   display: flex;
   gap: 10px;
}

/* box styles */
.flex-item {
   background-color: #ddd;
   border: 2px solid black;
   padding: 15px 25px;
   text-align: center;
}

.flex-container {
   background-color: #ddf;
   border: 1px dotted black;
   height: 200px;
   max-width: 500px;
   padding: 20px;
}
01
02
03
04
05

order

Met order kan je de volgorde bepalen:

.flex-item:nth-child(2) {
   order: 2; /* zet tweede item als laatste */
}
.flex-item:nth-child(3) {
   order: -1; /* zet derde item aan het begin */
}
.flex-item:nth-child(4) {
   order: 1; /* zet vierde item als voorlaatste */
}

.flex-container {
   align-items: flex-start;
   display: flex;
   gap: 10px;
}

/* box styles */
.flex-item {
   background-color: #ddd;
   border: 2px solid black;
   padding: 15px 25px;
   text-align: center;
}

.flex-container {
   background-color: #ddf;
   border: 1px dotted black;
   height: 200px;
   max-width: 500px;
   padding: 20px;
}
01
02
03
04
05

align-self

Verander de positie ingesteld door align-items voor individuele items met align-self:

.flex-item:last-child {
   align-self: flex-end; /* overschrijft align-items */
}

.flex-container {
   align-items: flex-start;
   display: flex;
   gap: 10px;
}

/* box styles */
.flex-item {
   background-color: #ddd;
   border: 2px solid black;
   padding: 15px 25px;
   text-align: center;
}

.flex-container {
   background-color: #ddf;
   border: 1px dotted black;
   height: 200px;
   max-width: 500px;
   padding: 20px;
}
01
02
03
04
05

flex (flex-grow, flex-shrink en flex-basis)

Deze property combineert flex-grow, flex-shrink en flex-basis. Het is vooral van belang bij kolommen, en zegt wat hun initiële breedte is, en hoe snel ze groeien en krimpen naargelang de breedte van de container.

De meest voorkomende waarden (te onthouden!):

voorbeeld uitleg betekenis
flex: 0 0 200px; groeit of krimpt niet, initieel 200px breed vaste afmeting van 200px
flex: 1 1 0; groeit normaal, krimpt normaal, initieel 0px breed flexibel, neemt beschikbare ruimte in
flex: 0 1 auto; groeit niet, kan krimpen, initieel natuurlijke breedte
(bepaald door content of, indien ingesteld, width property)		 niet groter dan de content

Nog andere voorbeelden:

voorbeeld uitleg betekenis
flex: 1 0 200px; groeit normaal, krimpt niet, initieel 200px minstens 200px
flex: 0 1 200px; groeit niet, krimpt normaal, initieel 200px maximaal 200px
flex: 1 1 200px; groeit normaal, krimpt normaal, initieel 200px flexibel, initieel 200px
flex: 2 1 200px; groeit dubbel zo snel, krimpt normaal, initieel 200px flexibel, initieel 200px, groeit sneller
flex: 1 2 200px; groeit normaal, krimpt dubbel zo snel, initieel 200px breed flexibel, initieel 200px, krimpt sneller

Voorbeeld 1: vaste kolommen links en rechts, flexibele kolom in het midden

.flex-item:nth-child(1) { flex: 0 0 150px; }
.flex-item:nth-child(2) { flex: 1 1 0; }
.flex-item:nth-child(3) { flex: 0 0 150px; }
.flex-container {
   display: flex;
   gap: 10px;
}

/* box styles */
.flex-item {
   background-color: #ddd;
   border: 2px solid black;
   font-size: 10px;
   text-align: center;
}

.flex-container {
   background-color: #ddf;
   border: 1px dotted black;
   height: 200px;
   padding: 20px;
   width: 450px;
}
flex: 0 0 150px;
flex: 1 1 0;
flex: 0 0 150px;
gebruik de slider om de containerbreedte te veranderen

 

Voorbeeld 2: flexibele kolommen, zelfde initiële breedte, krimpen alledrie even veel, middelste kolom groeit drie keer zo veel

.flex-item:nth-child(1) { flex: 1 1 150px; }
.flex-item:nth-child(2) { flex: 3 1 150px; }
.flex-item:nth-child(3) { flex: 1 1 150px; }
.flex-container {
   display: flex;
   gap: 10px;
}

/* box styles */
.flex-item {
   background-color: #ddd;
   border: 2px solid black;
   font-size: 10px;
   text-align: center;
}

.flex-container {
   background-color: #ddf;
   border: 1px dotted black;
   height: 200px;
   padding: 20px;
   width: 510px;
}
flex: 1 1 150px
flex: 3 1 150px
flex: 1 1 150px
gebruik de slider om de containerbreedte te veranderen

Grid

Met grid kan je een reeks children, de grid items, schikken met rijen en kolommen in een raster, de grid container. Het meest complete overzicht vind je op https://css-tricks.com/snippets/css/complete-guide-grid/. Om het overzichtelijk te houden behandelen we niet alles van CSS Grid. Dit laten we b.v. weg (als je niet weet waarover het gaat: maakt niet uit, want je moet het dus niet kennen of kunnen):

Dit betekent dus ook dat je dit niet mag gebruiken in dit vak.

Grid terminologie

Er zijn online verschillende interactieve CSS Grid generators te vinden, b.v. op https://grid.layoutit.com/

Grid properties overzicht

De CSS properties voor de grid container:

eigenschap waarden betekenis
display grid|inline-grid layouten met grid als blockevel of inline element
gap, column-gap, row-gap px|%|... ruimte tussen items
grid-template-columns kolombreedte (zie verder) definitie kolombreedtes
grid-template-rows rijhoogte (zie verder) definitie rijhoogtes
align-items start|center|end|stretch verticale uitlijning van items
justify-items start|center|end|stretch horizontale uitlijning van items
align-content start|center|end|space-between|stretch|... schikking van de grid rijen in de grid container
place-items combinatie van align-items en justify-items, b.v. place-items: center start;

De CSS properties voor het grid item:

eigenschap waarden betekenis
grid-column kolomspan (zie verder) tussen welke verticale lijnen zit het item
grid-row rijspan (zie verder) tussen welke horizontale lijnen zit het item
align-self start|center|end|stretch verticale uitlijning van een item in de cel
justify-self start|center|end|stretch horizontale uitlijning van een item in de cel

Grid voorbeeld

startcode

We starten van een container met 5 items. De standaard weergave, zonder layout: 

<div class="grid-container">
   <div class="grid-item item1">01</div>
   <div class="grid-item item2">02</div>
   <div class="grid-item item3">03</div>
   <div class="grid-item item4">04</div>
   <div class="grid-item item5">05</div>
</div>

.grid-item {
   background-color: #ddd;
   border: 2px solid black;
   line-height: 25px;
   padding: 5px;
   text-align: center;
}

.grid-container {
   background-color: #ddf;
   border: 1px dotted black;
   max-width: 500px;
   padding: 20px;
}
01
02
03
04
05

display: grid

Met display: grid maak je van de container een grid container; rijen en kolommen definieer je met grid-template-rows en grid-template-columns, b.v. 4 kolommen en 3 rijen. 

.grid-container {
   display: grid; /* maak grid container */
   grid-template-columns: repeat(4, 1fr); /* 4 kolommen, elk 1 fractie */
   grid-template-rows: repeat(3, 1fr); /* 3 rijen, elk 1 fractie */
}

/* box styles */
.grid-item {
   background-color: #ddd;
   border: 2px solid black;
   line-height: 25px;
   padding: 5px;
   text-align: center;
}

.grid-container {
   background-color: #ddf;
   border: 1px dotted black;
   height: 335px;
   width: 500px;
   padding: 20px;
}
01
02
03
04
05

Merk op: items worden standaard cel per cel geplaatst in rijen.

gap

Geef ruimte tussen kolommen/rijen met gap:

.grid-container {
   display: grid; /* maak grid container */
   gap: 10px;
   grid-template-columns: repeat(4, 1fr); /* 4 kolommen, elk 1 fractie */
   grid-template-rows: repeat(3, 1fr); /* 3 rijen, elk 1 fractie */
}

/* box styles */
.grid-item {
   background-color: #ddd;
   border: 2px solid black;
   line-height: 25px;
   padding: 5px;
   text-align: center;
}

.grid-container {
   background-color: #ddf;
   border: 1px dotted black;
   height: 335px;
   width: 500px;
   padding: 20px;
}
01
02
03
04
05

grid-template-columns, grid-template-rows

Hiermee definieer je de kolommen en rijen, en hoe ze verdeeld worden over de beschikbare breedte/hoogte. Overzicht van de belangrijkste gebruikte eenheden en hun betekenis:

voorbeeld uitleg
200px exacte breedte
2fr twee delen van beschikbare ruimte (fr: 'fractie')
minmax(100px, 1fr) zelfde als 1fr, maar minstens 100px
auto automatisch, naargelang de breedte van de inhoud
repeat(3, 1fr) drie gelijke kolommen, dus hetzelfde als 1fr 1fr 1fr
repeat(auto-fit, minmax(150px, 1fr)) vul met zoveel kolommen als nodig, maar niet smaller dan 150px
Voorbeeld 1

Voor de duidelijkheid nemen we voorlopig 5 kolommen, evenveel als er items zijn.

Een voorbeeld met repeat(3, 1fr) repeat(2, 100px), dus drie gelijke dynamische kolommen en twee vaste van 100px:

.grid-container {
   display: grid; /* maak grid container */
   gap: 10px;
   grid-template-columns: repeat(3, 1fr) repeat(2, 100px); /* of 1fr 1fr 1fr 100px 100px */
}

/* box styles */
.grid-item {
   background-color: #ddd;
   border: 2px solid black;
   line-height: 25px;
   padding: 5px;
   text-align: center;
}

.grid-container {
   background-color: #ddf;
   border: 1px dotted black;
   height: 200px;
   padding: 20px;
   width: 500px;
}
01
1fr
02
1fr
03
1fr
04
100px
05
100px
gebruik de slider om de containerbreedte te veranderen

 

Voorbeeld 2

Voorbeeld met 100px 2fr 1fr minmax(100px, 1fr) 100px, dus een vaste 100px kolom, één van dubbele breedte, één enkele breedte, een enkele breedte maar niet minder dan 100px, en weer een vaste van 100px:

.grid-container {
   display: grid; /* maak grid container */
   gap: 10px;
   grid-template-columns: 100px 2fr 1fr minmax(100px, 1fr) 100px;
}

/* box styles */
.grid-item {
   background-color: #ddd;
   border: 2px solid black;
   line-height: 25px;
   padding: 5px;
   text-align: center;
}

.grid-container {
   background-color: #ddf;
   border: 1px dotted black;
   height: 200px;
   padding: 20px;
   width: 500px;
}
01
100px
02
2fr
03
1fr
04
minmax(100px, 1fr)
05
100px
gebruik de slider om de containerbreedte te veranderen; merk op hoe 2fr twee keer zo snel groeit/krimpt als 1fr

 

Voorbeeld 3

Voorbeeld met repeat(auto-fit, minmax(150px, 1fr)), dus automatisch gevuld met gelijke kolommen, maar niet smaller dan 150px:

.grid-container {
   display: grid; /* maak grid container */
   gap: 10px;
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* box styles */
.grid-item {
   background-color: #ddd;
   border: 2px solid black;
   line-height: 25px;
   padding: 5px;
   text-align: center;
}

.grid-container {
   background-color: #ddf;
   border: 1px dotted black;
   height: 335px;
   padding: 20px;
   width: 500px;
}
01
minmax(150px, 1fr)
02
minmax(150px, 1fr)
03
minmax(150px, 1fr)
04
minmax(150px, 1fr)
05
minmax(150px, 1fr)
gebruik de slider om de containerbreedte te veranderen

Dit voorbeeld is ideaal voor b.v. fotogallerijen

grid-row, grid-column

We keren terug naar 4 kolommen, met de eerste kolom vast op 100px, de tweede kolom dubbel zo breed als de derde, en de laatste kolom tussen 50 en 75px:

Positioneer individuele items in gebieden gedefinieerd door grid-column en grid-row:

/* items */
.item1 {
   grid-column: 2 / 4; /* tussen kolomlijnen 2 en 4 */
   /* geen rij(en) opgegeven, neem eerst beschikbare rij */
}
.item2 {
   grid-column: 4 / 5; /* tussen kolomlijnen 4 en 5 */
   grid-row: 1 / span 3; /* start bij rijlijn 1, span 3 rijen */
}
.item3 {
   grid-column: 1 / 2; /* tussen kolomlijnen 1 en 2 */
   grid-row: 1 / 3; /* tussen rijlijnen 1 en 3 */
}

/* container */
.grid-container {
   display: grid; /* maak grid container */
   gap: 10px;
   grid-template-columns: repeat(4, 1fr); /* 4 kolommen, elk 1 fractie */
   grid-template-rows: repeat(3, 1fr); /* 3 rijen, elk 1 fractie */
}

/* box styles */
.grid-item {
   background-color: #ddd;
   border: 2px solid black;
   line-height: 25px;
   padding: 5px;
   text-align: center;
}

.grid-container {
   background-color: #ddf;
   border: 1px dotted black;
   height: 335px;
   max-width: 500px;
   padding: 20px;
}
01
02
03
04
05

Merk op:

align-items, justify-content

Deze properties aligneren een item binnen de grid area:

/* alignering */
.grid-container {
   align-items: center;
   justify-items: start;
}

/* items */
.item1 {
   grid-column: 2 / 4; /* tussen kolomlijnen 2 en 4 */
   /* geen rij(en) opgegeven, neem eerst beschikbare rij */
}
.item2 {
   grid-column: 4 / 5; /* tussen kolomlijnen 4 en 5 */
   grid-row: 1 / span 3; /* start bij rijlijn 1, span 3 rijen */
}
.item3 {
   grid-column: 1 / 2; /* tussen kolomlijnen 1 en 2 */
   grid-row: 1 / 3; /* tussen rijlijnen 1 en 3 */
}

/* container */
.grid-container {
   display: grid; /* maak grid container */
   gap: 10px;
   grid-template-columns: repeat(4, 1fr); /* 4 kolommen, elk 1 fractie */
   grid-template-rows: repeat(3, 1fr); /* 3 rijen, elk 1 fractie */
}

/* box styles */
.grid-item {
   background-color: #ddd;
   border: 2px solid black;
   display: inline-block;
   line-height: 25px;
   padding: 5px;
   text-align: center;
}

.grid-container {
   background-color: #ddf;
   border: 1px dotted black;
   height: 335px;
   max-width: 500px;
   padding: 20px;
}
01
02
03
04
05

Probeer de verschillende waarden uit (align-self en justify-self worden in deze demo op item1 uitgevoerd):

Met align-self en justify-self kan je deze waarden overschrijven voor individuele items, b.v. het eerste item:

→ de waarde auto betekent: hetzelfde als de container

Flexbox of Grid?

Flexbox en Grid zijn vaak inwisselbaar; meestal kun je een layoutkwestie zowel met het ene als met het andere oplossen. Vuistregel:

Voorbeeld 1: horizontaal menu

Typische HTML, en CSS fragment voor de horizontale layout met flexbox en grid:

<ul class="hormenu">
   <li><a href="#">home</a></li>
   <li><a href="#">products</a></li>
   <li><a href="#">about</a></li>
   <li><a href="#">contact</a></li>
</ul>
.hormenu {
   display: flex;
   gap: 10px;
}



.hormenu {
   display: grid;
   gap: 10px;
   grid-auto-flow: column; /* hebben we niet gezien */
   grid-auto-columns: max-content;  /* hebben we niet gezien */
}

Winnaar: Flexbox

Voorbeeld 2: header layout

Typische HTML met logo links en menu rechts, en CSS fragment voor de horizontale layout met flexbox en grid:

<header>
   <a href=""><img src="img/logo.jpg" alt="logo"></a>
   <nav>...</nav>
</header>
header {
   display: flex;
   justify-content: space-between;
}




header {
   display: grid;
   grid-template-columns: auto auto;
}
nav {
   align-self: end;
}

Winnaar: Flexbox

Voorbeeld 3: content kolommen

Verdelen we de main in een variabele kolom links, en een 200px kolom rechts:

<main>
   <div class="main__content"></div>
   <aside>...</aside>
</main>

Kolomlayout met flexbox en grid:

main {
   display: flex;
}
.main__content {
   flex: 1 1 0;
}
aside {
   flex: 0 0 200px;
}
main {
   display: grid;
   grid-template-columns: 1fr 200px;
}

Winnaar: Grid

Voorbeeld 4: formulier

Nemen we een eenvoudig loginformulier. HTML en CSS voor flexbox vs grid:

<form>
   <div class="form__control">
      <label for="login">Login:</label>
      <input type="text" id="login" required>
   </div>
   <div class="form__control">
      <label for="pw">Password:</label>
      <input type="password" id="pw" required>
   </div>
   <div>
      <button type="submit">Submit</button>
   </div>
</form>
.form__control {
   display: flex;
}
label {
  flex: 0 0 120px;
}
input {
   flex: 1 1 0;
}

<form>
    <label for="login">Login:</label>
    <input type="text" id="login" required>
    <label for="pw">Password:</label>
    <input type="password" id="pw" required>
    <button type="submit">Submit</button>
</form>







form {
   display: grid;
   grid-template-columns: 120px 1fr;
}
button[type=submit] {
  grid-column: 1 / 3;
  justify-self: start;
}

Winnaar: Grid

Voorbeeld 5: foto gallerij

HTML code en CSS voor Flexbox en Grid:

<figure id="gallery">
   <img src="img/foto01.jpg" alt="">
   <img src="img/foto02.jpg" alt="">
   <img src="img/foto03.jpg" alt="">
   <img src="img/foto04.jpg" alt="">
   <img src="img/foto05.jpg" alt="">
   <img src="img/foto06.jpg" alt="">
   <img src="img/foto07.jpg" alt="">
</figure>

#gallery {
   display: flex;
   column-gap: calc(8% / 3);
   flex-wrap: wrap;
   row-gap: 10px;
}
#gallery img {
   display: block;
   width: 23%; /* 4 kolommen */
}
#gallery {
   display: grid;
   gap: 10px;
   grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

Positionering

Standaard weergave

Positionering bepaalt de plaats van elementen a.h.v. coördinaten top, right, bottom en/of left. Laat ons starten van volgende code, zonder layout. Aangezien het blocklevel elementen zijn, is de natuurlijke positie van de drie blokken onder elkaar:

<div class="demowrapper">
   <div class="demobox demobox1">1</div>
   <div class="demobox demobox2">2</div>
   <div class="demobox demobox3">3</div>
</div>
/* box styles */
.demobox {
   border: 2px solid black;
   width: 80px;
   height: 40px;
   margin-bottom: 10px;
   padding: 5px;
}

.demowrapper {
   border: 1px dotted black;
   margin: 50px;
   max-width: 500px;
   padding: 20px;
}
.demobox1 {
     background-color: #ddd;
}
.demobox2 {
   background-color: #888;
}
.demobox3 {
   background-color: #333;
}
1
2
3

Relatief

Met relatieve positionering wordt het element uit zijn natuurlijke positie verschoven; andere elementen blijven waar ze zijn:

<div class="demowrapper">
   <div class="demobox demobox1">1</div>
   <div class="demobox demobox2">2</div>
   <div class="demobox demobox3">3</div>
</div>
            
/* relative positioning */
.demobox2 {
   position: relative;
   left: 10px; /* verschuif 10px naar rechts */
   top: 20px; /* verschuif 20px naar beneden */
}

/* box styles */
.demobox {
   border: 2px solid black;
   height: 40px;
   margin-bottom: 10px;
   padding: 5px;
   width: 80px;
}

.demowrapper {
   background-color: #fafafa;
   border: 1px dotted black;
   margin: 50px;
   max-width: 500px;
   padding: 20px;
}
.demobox1 {
     background-color: #ddd;
}
.demobox2 {
   background-color: #888;
}
.demobox3 {
   background-color: #333;
}
1
2
3

Absoluut

Met absolute positionering neem je een element uit de pagina, en positioneer je het ten opzichte van de paginaranden (overlapping is mogelijk); andere elementen vullen de ontstane ruimte. 

<div class="demowrapper">
   <div class="demobox demobox1">1</div>
   <div class="demobox demobox2">2</div>
   <div class="demobox demobox3">3</div>
</div>
            
/* relative positioning */
.demobox2 {
   position: absolute;
   left: 5px; /* 5px vanaf links */
   top: 5px; /* 5px vanaf boven */
}

/* box styles */
.demobox {
   border: 2px solid black;
   height: 40px;
   margin-bottom: 10px;
   padding: 5px;
   width: 80px;
}

.demowrapper {
   background-color: #fafafa;
   border: 1px dotted black;
   margin: 50px;
   max-width: 500px;
   padding: 20px;
}
.demobox1 {
  background-color: #ddd;
}
.demobox2 {
  background-color: #888;
}
.demobox3 {
  background-color: #333;
}
1
2
3

Je kan het ook rechtsonder plaatsen, b.v. met right: 10px; bottom: 10px; 

<div class="demowrapper">
   <div class="demobox demobox1">1</div>
   <div class="demobox demobox2">2</div>
   <div class="demobox demobox3">3</div>
</div>
            
/* relative positioning */
.demobox2 {
   position: absolute;
   bottom: 10px; /* 10px vanaf beneden */
   right: 10px; /* 10px vanaf rechts */
}

/* box styles */
.demobox {
   border: 2px solid black;
   height: 40px;
   margin-bottom: 10px;
   width: 80px;
   padding: 5px;
}

.demowrapper {
   background-color: #fafafa;
   border: 1px dotted black;
   margin: 50px;
   max-width: 500px;
   padding: 20px;
}
.demobox1 {
  background-color: #ddd;
}
.demobox2 {
  background-color: #888;
}
.demobox3 {
  background-color: #333;
}
1
2
3

absoluut-relatief

De coördinaten zijn standaard t.o.v. de pagina. Als je wil positioneren ten opzichte van de parent, stel je die in op position: relative; dit heet absoluut-relatieve positionering.

<div class="demowrapper">
   <div class="demobox demobox1">1</div>
   <div class="demobox demobox2">2</div>
   <div class="demobox demobox3">3</div>
</div>
/* absoluut-relative positioning */
.demowrapper {
   position: relative; /* nieuwe referentie voor coördinaten */
}

.demobox2 {
   position: absolute;
   left: 5px; /* 5px vanaf links */
   top: 5px; /* 5px vanaf boven */
}

/* box styles */
.demobox {
   border: 2px solid black;
   height: 40px;
   margin-bottom: 10px;
   padding: 5px;
   width: 80px;
}

.demowrapper {
   background-color: #fafafa;
   border: 1px dotted black;
   margin: 50px;
   max-width: 500px;
   padding: 20px;
}
.demobox1 {
  background-color: #ddd;
}
.demobox2 {
  background-color: #888;
}
.demobox3 {
  background-color: #333;
}
1
2
3

overlay voorbeeld

Als je vier coördinaten opgeeft (en width en height weghaalt) wordt het element over de hele pagina uitgerokken (en bedekt het de andere blokken). Met een gedeeltelijk transparante achtergrond kan je dan een overlay maken:


<div class="overlay"><h2>OVERLAY CONTENT HIER</h2></div>
<p>Wij zin rijken ruimer zekere. Loopbaan een district bordeaux mag bevreesd heb. Inkomsten op af singapore behoeften. Het brengen den gedaald menigte markten evenals javanen. Ontwouding middellijn nu geruineerd ptolomaeus denzelfden in handelaars. Vrij in nu kilo west. Wieschen vermengd verbouwd zou was die verschil het geheelen voorzien. </p>
<p>Gebrek loopen kan zee zit andere ton levert zeggen zonder. Rook zoo twee zee hen maal. Wantrouwen ons tot inboorling nog doorzoeken.</p>
/* absolute positioning */
.overlay {
   /* maak overlay */
   background-color: #888c;
   position: absolute;
   bottom: 20px; /* 10px vanaf beneden */
   left: 30px; /* 10px vanaf links */
   right: 30px; /* 10px vanaf rechts */
   top: 20px; /* 10px vanaf boven */
}
.overlay  h2 {
   color: white;
   padding: 20px;
   text-align: center;
}

OVERLAY CONTENT HIER

Wij zin rijken ruimer zekere. Loopbaan een district bordeaux mag bevreesd heb. Inkomsten op af singapore behoeften. Het brengen den gedaald menigte markten evenals javanen. Ontwouding middellijn nu geruineerd ptolomaeus denzelfden in handelaars. Vrij in nu kilo west. Wieschen vermengd verbouwd zou was die verschil het geheelen voorzien.

Gebrek loopen kan zee zit andere ton levert zeggen zonder. Rook zoo twee zee hen maal. Wantrouwen ons tot inboorling nog doorzoeken.

z-index

Je kan de stapelvolgorde van gepositioneerde elementen altijd aanpassen met z-index, een willekeurig geheel getal:

Een voorbeeld met drie absoluut gepositioneerde blokken:

<div class="demobox demobox1">1</div>
<div class="demobox demobox2">2</div>
<div class="demobox demobox3">3</div>
<p>Wij zin rijken ruimer zekere. Loopbaan een district bordeaux mag bevreesd heb. Inkomsten op af singapore behoeften. Het brengen den gedaald menigte markten evenals javanen. Ontwouding middellijn nu geruineerd ptolomaeus denzelfden in handelaars. Vrij in nu kilo west. Wieschen vermengd verbouwd zou was die verschil het geheelen voorzien. </p>
<p>Gebrek loopen kan zee zit andere ton levert zeggen zonder. Rook zoo twee zee hen maal. Wantrouwen ons tot inboorling nog doorzoeken.</p>
/* stapelvolgorde */
.demobox1 {
   z-index: 4; /* probeer een ook 20, 1 en -1 */
}
.demobox2 {
   z-index: 10;
}
.demobox3 {
   z-index: 2;
}

/* absolute positionering */
.demobox1 {
   position: absolute;
   left: 25px;
   top: -15px;
}
.demobox2 {
   position: absolute;
   left: 65px;
   top: 15px;
}
.demobox3 {
   left: 45px;
   top: 35px;
   position: absolute;
}

/* box styles */
.demobox {
   border: 2px solid black;
   margin-bottom: 10px;
   padding: 5px;
   width: 160px;
   height: 80px;
}

.demowrapper {
   background-color: #fafafa;
   border: 1px dotted black;
   margin: 50px;
   max-width: 500px;
   padding: 20px;
}
.demobox1 {
  background-color: #ddd;
}
.demobox2 {
  background-color: #888;
}
.demobox3 {
  background-color: #333;
}

Wij zin rijken ruimer zekere. Loopbaan een district bordeaux mag bevreesd heb. Inkomsten op af singapore behoeften. Het brengen den gedaald menigte markten evenals javanen. Ontwouding middellijn nu geruineerd ptolomaeus denzelfden in handelaars. Vrij in nu kilo west. Wieschen vermengd verbouwd zou was die verschil het geheelen voorzien.

Gebrek loopen kan zee zit andere ton levert zeggen zonder. Rook zoo twee zee hen maal. Wantrouwen ons tot inboorling nog doorzoeken.

1
2
3

Fixed

De fixed positionering fixeert een element op de pagina, onafhankelijk van het scrollen:

<p>(scroll this page)</p>
<p>Folly words widow one downs few age every seven. If miss part by fact he park just shew. Discovered had get considered projection who favourable. Necessary up knowledge it tolerably. Unwilling departure education is be dashwoods or an. Use off agreeable law unwilling sir deficient curiosity instantly. Easy mind life fact with see has bore ten. Parish any chatty can elinor direct for former. Up as meant widow equal an share least. </p>
<p>Examine she brother prudent add day ham. Far stairs now coming bed oppose hunted become his. You zealously departure had procuring suspicion. Books whose front would purse if be do decay. Quitting you way formerly disposed perceive ladyship are. Common turned boy direct and yet. </p>
<p>Ye on properly handsome returned throwing am no whatever. In without wishing he of picture no exposed talking minutes. Curiosity continual belonging offending so explained it exquisite. Do remember to followed yourself material mr recurred carriage. High drew west we no or at john. About or given on witty event. Or sociable up material bachelor bringing landlord confined. Busy so many in hung easy find well up. So of exquisite my an explained remainder. Dashwood denoting securing be on perceive my laughing so.</p>
<a id="toplink" href="#top">back to top ↑</a>
#toplink {
  /* add fixed top link */
  position: fixed;
  right: 10px;
  bottom: 10px;
  /* colors & borders */
  background-color: #ddd;
  border: 2px solid black;
  padding: 5px 10px;
}

Sticky

De sticky positionering scrollt tot een gegeven offset bereikt is, waarna het blijft plakken.

<p>(scroll this page)</p>
<div id="sticky">I am sticky!</div>
<p>Folly words widow one downs few age every seven. If miss part by fact he park just shew. Discovered had get considered projection who favourable. Necessary up knowledge it tolerably. Unwilling departure education is be dashwoods or an. Use off agreeable law unwilling sir deficient curiosity instantly. Easy mind life fact with see has bore ten. Parish any chatty can elinor direct for former. Up as meant widow equal an share least. </p>
<p>Examine she brother prudent add day ham. Far stairs now coming bed oppose hunted become his. You zealously departure had procuring suspicion. Books whose front would purse if be do decay. Quitting you way formerly disposed perceive ladyship are. Common turned boy direct and yet. </p>
<p>Ye on properly handsome returned throwing am no whatever. In without wishing he of picture no exposed talking minutes. Curiosity continual belonging offending so explained it exquisite. Do remember to followed yourself material mr recurred carriage. High drew west we no or at john. About or given on witty event. Or sociable up material bachelor bringing landlord confined. Busy so many in hung easy find well up. So of exquisite my an explained remainder. Dashwood denoting securing be on perceive my laughing so.</p>

#sticky {
   /* make sticky */
   position: sticky;
   top: 0; /* stick to top */
   /* colors & borders */
   background-color: #cae8ca;
   border: 2px solid #4CAF50;
   color: inherit;
   padding: 5px 10px;
   text-decoration: none;
}

Wanneer gebruiken

Studenten hebben vaak de neiging positionering veel te snel terug te grijpen naar positionering. Eigenlijk wordt het zeer weinig gebruikt. Wanneer wel:

Gebruik positionering zeker niet voor:

De vuistregel is: als het anders kan (b.v. met flexbox), gebruik dan geen positionering

Layout case study

We bekijken een samenvattend voorbeeld, in twee versies. Resultaat:

Versie met hoofdzakelijk Flexbox

In deze versie is enkel Grid gebruikt voor de twee kolommen van de main, de rest is met Flexbox.

<body>
   <header>
      <h1 class="header_logo">Logo</h1>
      <p class="header_tagline">some great tagline</p>
      <form class="header_search">
         <label><input type="search" placeholder="search for something"></label>
         <button type="submit">🔍</button>
      </form>
   </header>
   <nav>
      <ul>
         <li><a href="">home</a></li>
         <li><a href="">about</a></li>
         <li><a href="">contact</a></li>
      </ul>
   </nav>
   <main>
      <div id="content">
         content here...
      </div>
      <aside>
         aside here...
      </aside>
   </main>
   <footer>
      <p>© 2024</p>
   </footer>
</body>
/* body layout */
body {
   display: flex;
   flex-direction: column; /* plaats header, nav, main, footer onder elkaar */
   margin: 0 auto; /* centreer body in <html> */
   max-width: 1000px; /* maximaal 1000px breed */
   min-height: 100vh; /* bedek minstens hele viewport */
}

/* header layout */
header {
   align-items: center; /* items verticaal centreren */
   display: flex;
   justify-content: space-between; /* zo ver mogelijk uit elkaar */
   min-height: 150px;
}
.header_logo {
   flex: 0 0 100px; /* vaste breedte */
}
.header_search {
   align-self: flex-end; /* zet zichzelf beneden */
   flex: 0 0 220px; /* vaste breedte */
}

/* main */
main {
   flex: 1 1 0; /* zal resterende hoogte vullen */
}

/* nav layout */
nav ul {
   display: flex;
   gap: 10px; /* ruimte tussen items */
   justify-content: center; /* items in het midden */
}

/* main layout */
main {
   display: flex;
}
#content {
   flex: 1 1 0; /* zal resterende breedte vullen */
}
aside {
   flex: 0 0 200px; /* 200px vast */
}

/* footer layout */
footer {
  text-align: center;
}

/* algemene stijlen */
* {
   box-sizing: border-box;
}
body {
   border-left: 2px solid #ccc;
   border-right: 2px solid #ccc;
   padding: 0;
}
header, nav, footer, #content, aside {
   padding: 10px 20px;
}
nav {
   background-color: #eee;
}
nav ul {
   list-style: none;
   margin: 0;
}
header, footer {
   background-color: #ddd;
   padding: 10px 20px;
}
aside {
   background-color: #bcd;
}

Je herkent volgende technieken:

Versie met hoofdzakelijk Grid

De HTML code is gelijk, maar we geven het voor de duidelijkheid nog eens weer, samen met de CSS code:

<body>
   <header>
      <h1 class="header_logo">Logo</h1>
      <p class="header_tagline">some great tagline</p>
      <form class="header_search">
         <label><input type="search" placeholder="search for something"></label>
         <button type="submit">🔍</button>
      </form>
   </header>
   <nav>
      <ul>
         <li><a href="">home</a></li>
         <li><a href="">about</a></li>
         <li><a href="">contact</a></li>
      </ul>
   </nav>
   <main>
      <div id="content">
         content here...
      </div>
      <aside>
         aside here...
      </aside>
   </main>
   <footer>
      <p>© 2024</p>
   </footer>
</body>
/* body layout */
body {
   display: grid; /* maak grid */
   grid-template-rows: auto auto 1fr auto; /* vier rijen */
   margin: 0 auto; /* centreer body in <html< */
   max-width: 1000px; /* maximaal 1000px breed */
   min-height: 100vh; /* bedek minstens hele viewport */
}

/* header layout */
header {
   align-items: center; /* items verticaal centreren */
   display: grid; /* maak grid */
   grid-template-columns: auto 1fr auto; /* drie kolommen */
   justify-items: center;
   min-height: 150px;
}

.header_search {
   align-self: end; /* zet zichzelf beneden */
}

/* nav layout */
nav ul {
   display: flex;
   gap: 10px; /* ruimte tussen items */
   justify-content: center; /* items in het midden */
}

/* main layout */
main {
   display: grid;
   grid-template-columns: 1fr 200px;
}

/* footer layout */
footer {
   text-align: center;
}

/* main layout */
main {
   display: flex;
}
#content {
   flex: 1 1 auto;
}
aside {
   flex: 0 0 200px;
}

/* footer layout */
footer {
   text-align: center;
}

/* algemene stijlen */
* {
   box-sizing: border-box;
}
body {
   border-left: 2px solid #ccc;
   border-right: 2px solid #ccc;
   padding: 0;
}
header, nav, footer, #content, aside {
   padding: 10px 20px;
}
nav {
   background-color: #eee;
}
nav ul {
   list-style: none;
   margin: 0;
}
header, footer {
   background-color: #ddd;
   padding: 10px 20px;
}
aside {
   background-color: #bcd;
}

Je herkent volgende technieken: