Static layout

WEB ESSENTIALS

Layout in webdevelopment

Layout

Tot nu toe zagen we enkel hoe block-elementen zich onder elkaar stapelden en inline-elementen naast elkaar. Als je online rondkijkt is de layout van een website vaak veel complexer.

Layout

Layout

Om een design correct na te maken hebben we dus een manier nodig om elementen zowel op de horizontale as als op de verticale as te kunnen uitlijnen

Float

Float

Vanaf 1999 was "floating" dé manier om een layout te bepalen voor webpagina's. Je kan er elementen links of rechts mee laten "drijven". 

img {
  float: right;
}

Float

De CSS-eigenschap float werd oorspronkelijk gemaakt om tekst rond afbeeldingen te laten lopen, zoals in kranten.

.left-column {
  float: left;
  width: 70%;
}

.sidebar {
  float: right;
  width: 30%;
}

Maar developers gebruikten float ook om kolommen te maken, blokken naast elkaar te zetten en hele paginalay-outs te bouwen.

⚠️ Deze code niet gebruiken!

Float

Layouts opbouwen met float gaf veel problemen. Het was "prutswerk" om alles juist te krijgen en je had niet genoeg controle over de layout...

...dus werd ✨💕Flexbox💕✨  in het leven geroepen.

Float gebruiken

Gebruik een max-width (van bv: 40%) voor de afbeeldingen zodat tekst niet abrupt onderbroken wordt op mobiel!

🤓 Tip

Vandaag kunnen we float wel nog steeds gebruiken om tekst rond een afbeelding te laten lopen, zoals in een krant. 

img {
  float: right;
  margin-left: 1rem;
  max-width: 30rem;
  height: 30rem;  
}

Float gebruiken

Flexbox

Flexbox

Met Flexbox (Flexible Box Layout) kan je elementen in css makkelijk uitlijnen en ordenen binnen een container, zowel horizontaal (in een rij) als verticaal (in een kolom).

Flexbox vs. auto layout

Flexbox lijkt sterk op auto layout in Figma

Je kan bepalen hoe het element uitgelijnd moet worden binnen de container & hoeveel ruimte er tussen verschillende elementen moet zijn.

Je kan een richting bepalen (horizontaal of verticaal)

Items & container

Items: De elementen die we willen uitlijnen

Container: Het element rond de items (parent element)

Items & container

<div class="container">
  <div class="item-1">...</div>
  <div class="item-2">...</div>
  <div class="item-3">...</div>
</div>
.container {
  background: purple;
}

.item-1, .item-2, .item-3 {
  background: orange;
  margin: 1rem;
  width: 14rem;
  height: 4rem;
}

Items & container

<ul class="nav-menu">
  <li class="nav-menu__item"><a>Home</a></li>
  <li class="nav-menu__item"><a>About</a></li>
  <li class="nav-menu__item"><a>Blog</a></li>
  <li class="nav-menu__item"><a>Contact</a></li>
</ul>

Welke elementen willen we hier naast elkaar zetten?
Wat is hier de container/parent element?

Flexbox toevoegen

Flexbox voeg je toe op de container/parent element van
de items die je wil uitlijnen

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

.item {
  background: orange;
  margin: 1rem;
  width: 100%;
  height: 4rem;
}

Uitlijning

Wanneer flexbox toegevoegd werd, kan je bepalen hoe de items uitgelijnd worden binnen de container. Dat kunnen we zowel horizontaal bepalen als verticaal.

Main axis (horizontaal)

Cross axis (verticaal)

Uitlijning: horizontaal

Horizontale uitlijning stel je in met justify-content

  • justify-content: start (links, default)
  • justify-content: center (midden)
  • justify-content: end (rechts)
.container {
  background: purple;
  display: flex;
  justify-content: start;
}
.container {
  background: purple;
  display: flex;
  justify-content: center;
}
.container {
  background: purple;
  display: flex;
  justify-content: end;
}

start

center

end

Uitlijning: horizontaal

Horizontale uitlijning stel je in met justify-content

  • justify-content: space-between
  • justify-content: space-around
  • justify-content: space-evenly
.container {
  background: purple;
  display: flex;
  justify-content: space-between;
}
.container {
  background: purple;
  display: flex;
  justify-content: space-around;
}
.container {
  background: purple;
  display: flex;
  justify-content: space-evenly;
}

space-between

space-around

space-evenly

Uitlijning: horizontaal

Justify content

Uitlijning: verticaal

Verticale uitlijning stel je in met align-items. 

.container {
  background: purple;
  display: flex;
  align-items: stretch
}

stretch

Default staat dit op "stretch", als je de container hoger maakt of een bepaalt item langer maakt, zullen alle items zich stretchen om deze hoogte op te vullen. 

Uitlijning: verticaal

Verticale uitlijning stel je in met align-items.

  • align-items: start
  • align-items: center
  • align-items: end
.container {
  background: purple;
  display: flex;
  align-items: start;
}
.container {
  background: purple;
  display: flex;
  align-items: center;
}
.container {
  background: purple;
  display: flex;
  align-items: end;
}

start

center

end

Uitlijning: verticaal

Verticale uitlijning stel je in met align-items.

  • align-items: baseline
.container {
  background: purple;
  display: flex;
  align-items: baseline;
}

Baseline

Uitlijning: verticaal

Align-items

Flex-direction

Wanneer je flexbox toevoegt, komen de items by default horizontaal te staan. Dit kan je aanpassen met flex-direction.

.container {
  background: purple;
  display: flex;
  flex-direction: row;
}
.container {
  background: purple;
  display: flex;
  flex-direction: column;
}

flex-direction: row (horizontaal)

flex-direction: column (verticaal)

Flex-direction

Je kan de richting van de items ook omdraaien met row-reverse en column-reverse

.container {
  background: purple;
  display: flex;
  flex-direction: row-reverse;
}
.container {
  background: purple;
  display: flex;
  flex-direction: column-reverse;
}

flex-direction: row-reverse

flex-direction: column-reverse

Flex-direction

Flex-direction

Let op! Wanneer flex-direction verandert naar column, worden de assen ook omgedraaid. Je gebruikt nu justify-content om verticaal uit te lijnen en align-items om horizontaal uit te lijnen

.container {
  background: purple;
  display: flex;
  flex-direction: column;
  align-items: end
}

⚠️

Wanneer je row-reverse of column-reverse gebruikt, zullen "start" en "end" ook van plaats verwisselen

🤔

Gap

Gap gebruik je om de ruimte tussen de items in te stellen

.container {
  background: purple;
  display: flex;
  gap: 1rem;
}
.container {
  background: purple;
  display: flex;
  gap: 3rem;
}

1rem

1rem

3rem

3rem

Gap

Flex-wrap

Wanneer je heel veel items binnen een container hebt, zullen deze standaard op één lijn geplaatst worden, zelfs wanneer er te weinig ruimte is. Met flex-wrap kunnen we dit aanpassen.

  • flex-wrap: no-wrap (default, alles op één lijn)
  • flex-wrap: wrap (spring naar de volgende lijn indien nodig)
  • flex-wrap: wrap-reverse (omgekeerde volgorde)
.container {
  background: purple;
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 15rem
}

Flex-wrap

Order

Met order kan je spelen met de volgorde van de items. Deze property voeg je toe op het item zelf.

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

.item {
  background: orange;
  margin: 1rem;
  width: 14rem;
  height: 4rem;
}

.item-1 {
  order: 10;
}

zonder order aangepast

order van item 1 werd aangepast

Order

Je kan zowel negatieve als positieve getallen gebruiken

Order

Align-self

Met align-self kan je één specifiek item uitlijnen binnen een flex-container. 

  • Waardes: stretch, center, start, end
.container {
  background: purple;
  display: flex;
  gap: 1rem
}

.item {
  background: orange;
  width: 14rem;
  height: 4rem;
}

.item-3 {
  align-self: end;
}

Flex-grow bepaalt hoeveel een flex-item mag meegroeien in verhouding tot de andere flex-items wanneer er extra ruimte beschikbaar is in de container.

  • Het getal geeft de verhouding weer t.o.v. de andere items
  • Default waarde is 0, enkel positieve getallen zijn mogelijk

Flex-grow

.item-1, .item-3 {
  flex-grow: 1;
}

.item-2 {
  flex-grow: 2;
}

Flex-grow

.item-1, .item-2, .item-3 {
  flex-grow: 0;
  /*default, items groeien niet*/
}
.item-1, .item-2, .item-3 {
  flex-grow: 1;
  /*items groeien gelijk*/
}
.item-1, .item-3 {
  flex-grow: 1;
}

.item-2, {
  flex-grow: 2;
  /*item groeit dubbel zo veel*/
}

Flex-grow

De flex-shrink property bepaalt hoeveel een flex-item mag krimpen als er te weinig ruimte is in de container.

  • Het getal geeft de verhouding weer t.o.v. de andere items
  • Default waarde is 1, enkel positieve getallen zijn mogelijk
  • Bij waarde 0 behoudt het item zijn originele breedte, "niet krimpen"

Flex-shrink

.item-1, .item-3 {
  flex-shrink: 1;
}

.item-2 {
  flex-shrink: 2;
}

Flex-shrink

.item-1, .item-2 .item-3 {
  flex-shrink: 1;
  /* default, items krimpen gelijk*/
}

Startsituatie:

Items binnen container met extra ruimte

Aanpassing:

Container wordt kleiner gemaakt, hoe worden de items geschaald?

.item-2 {
  flex-shrink: 2;
  /* item krimpt dubbel zo veel*/
}
.item-1 {
  flex-shrink: 0;
  /* item behoudt originele breedte*/
}

Flex-shrink

Flex-basis

Flex-basis bepaalt de startbreedte (of hoogte) van een flex-item voordat flex-grow of flex-shrink er iets mee doet.

  • Default waarde: auto (neemt de breedte in van de content of de ingestelde waarde bij width/height)
  • Flex-basis lijkt op width, maar heeft voorrang. Als beide zijn ingesteld, dan gebruikt de browser flex-basis als uitgangspunt.
.item-1, .item-2, .item-3 {
  flex-basis: 20rem;
}

Met flex-basis: 0 negeer je de inhoudsbreedte van een item. Alle ruimte wordt verdeelt volgens  flex-grow.

🤓 Tip

Flex-basis

Flex combineert flex-grow, flex-shrink en flex-basis in 1 property.

Je geeft de waardes mee in de volgende volgorde:
flex-grow, flex-shrink, flex-basis

Flex

.item-1, .item-2, .item-3 {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

.item-1, .item-2, .item-3 {
  flex: 1 1 0;
}

Flex

Grid

Grid

Wanneer flexbox niet volstaat, kan je ook gebruik maken van CSS grid. Hiermee kan je complexe en flexibele layouts samenstellen via een grid dat je zelf instelt.

Grid

CSS grid zien we (nog) niet, maar als je interesse hebt kan er hier wel al eens zelf induiken