Built

Back to previous page
Jump to responsive | float | flex | grid | javascript
External: w3schools // MozDev // CSS Tricks

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Oefening 2 flex</title>
        <link rel="stylesheet" href="style.css" />
    </head>

Responsive

@media screen and (max-width: 600px) { }
@media screen and (min-width: 600px) { }  //  mobile first

Breakpoints
480px  /* Extra small devices (phones) */
735px  /* Small devices (tablets, large phones) */
980px  /* Large devices (laptops, desktops) */
1280px /* Extra large devices (large laptops and desktops) */
1680px /* Big screens (not commonly) */

@media only screen and (orientation: landscape) { }
@media only screen and (orientation: portrait) { }
@media print { /* All your print styles go here */ }

Float

float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;
clear  
! match the clear to the float
clear: both;  /* clear left en right  */
box
box-sizing

overflow
overflow-x (left/right)
overflow-y  (top/bottom)

Flex

w3schools // MozDev // CSS Tricks

Flex container (parent)

.flex-container {
   display: flex;
 }
flex-direction  /* bepaalt de richting waarin de elementen in hun container geplaatst worden  */
flex-direction: row   (default)
flex-direction: row-reverse 
flex-direction: column
flex-direction: column-reverse

flex-wrap
flex-wrap: nowrap        plaatst flex items op één lijn (default)
flex-wrap: wrap          plaatst flex items op verschillende lijnen van top naar bottom
flex-wrap: wrap-reverse  plaatst flex items op verschillende lijnen van bottom naar top.

flex-flow = flex-direction + flex-wrap
default = row nowrap.
flex-flow: <‘flex-direction’> || <‘flex-wrap’>

justify-content /* lijnt elementen horizontaal uit */
justify-content: flex-start     elementen aan de linkerkant van de container uitlijnen.
justify-content: flex-end       elementen aan de rechterkant van de container uitlijnen.
justify-content: center         elementen in het midden van de container uitlijnen.
justify-content: space-between  elementen gelijkmatig verdeeld over de as.
justify-content: space-around:  elementen met gelijke ruimte aan de buitenkanten op de as.
justify-content: space-evenly

align-items  /* lijnt elementen verticaal uit */
align-items: flex-start     elementen uitgelijnd naar de bovenkant van de container.
align-items: flex-end       elementen uitgelijnd naar de onderkant van de container.
align-items: center         elementen uitgelijnd op het verticaal middelpunt van de container.
align-items: baseline       elementen uitgelijnd op de basislijn van de container.
align-items: stretch        lementen worden uitgerokken om binnen de container te passen.

align-content
This aligns a flex container's lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.
Note: this property has no effect when there is only one line of flex items.

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

align-content: flex-start / align-content: start
align-content: flex-end / align-content: end
align-content: center
align-content: space-between
align-content: space-around
align-content: space-evenly
align-content: stretch (default)

Flex item (child)

order
.item {
  order: <integer>; /* default is 0 */
}

flex-grow
.item {
  flex-grow: <number>; /* default 0 */
}

flex-shrink
.item {
  flex-shrink: <number>; /* default 1 */
}

flex-basis  /* definieert de default size van een element 
.item {
  flex-basis: <length> | auto | keyword; /* default auto */
}
length: bvb 20%, 5rem, etc.
keyword: bvb auto, content, etc.

flex
.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
default is 0 1 auto

align-self
.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Grid

Javascript