Web: Essentials

Appearance

CSS: layout ​

Hieronder een overzicht van de drie belangrijkste layout technieken: float, flexbox en grid.

Float ​

Float was een van de eerste methoden om elementen naast elkaar te plaatsen. Je "floated" een element naar links of rechts, waardoor andere content eromheen stroomde. Tegenwoordig wordt dit enkel nog gebruikt voor een layout waar een afbeelding letterlijk doorheen de tekst mag drijven.

css
.floated-image {
  float: left; /* left | right | none */
  max-width: 20rem; /* maximum breedte van de afbeelding */
  margin-right: 1rem; /* marge zodat de afbeelding niet tegen de tekst plakt */
}

Float was een van de eerste methoden om elementen naast elkaar te plaatsen. Je "floated" een element naar links of rechts, waardoor andere content eromheen stroomde. Tegenwoordig wordt dit enkel nog gebruikt voor een layout waar een afbeelding letterlijk doorheen de tekst mag drijven.

Flexbox ​

Flexbox is ontworpen voor het maken van layouts in één dimensie (rij of kolom). Het biedt krachtige tools om elementen uit te lijnen, ruimte te verdelen en de volgorde van items te beïnvloeden.

css
.flex-row {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

We gaan hier verder mee in de Flexbox module.

Grid ​

Grid is een krachtige layoutechniek die je in staat stelt om webpagina's op te bouwen met een rasterstructuur. Je definieert rijen en kolommen, en plaatst elementen in specifieke cellen van het raster.

css
.flex-row {
  display: grid;
  grid-template:
    'header header header'
    'main main aside'
    'footer footer footer';
}

Grid wordt niet gegeven in dit vak maar je kan hier wel de properties zelf ontdekken.

Media Queries ​

Media queries worden gebruikt om vanuit CSS een onderscheid te kunnen maken om conditioneel stijl toe te passen in bepaalde scenarios.

Conceptueel: Als [media-query] dan [CSS].

In onze lessen gaan we dit vooral gebruiken om naar de breedte van het scherm te kijken.

css
/* show items under each other */
.flex-item {
  width: 100%;
}
 
/* Or show them in rows of 3 */
@media (min-width: 30rem) {
  .flex-item {
    width: 33%;
  }
}