HTML en CSS leren: De dwarsas

Align-items

Op het grote plein voor het podium is plaats in de hoogte. Maar zodra de trucks flex-items zijn, rekken ze allemaal uit tot boven en onder. "Mijn ijskraam is geen flatgebouw," lacht Nadia.

De dwarsas

Dwars op de hoofdas loopt de dwarsas: in een rij is dat van boven naar onder. Met align-items op de container kies je waar de items op die as staan.

Standaard is dat stretch: elk item rekt uit tot de volle hoogte van de container. Met flex-start staan ze bovenaan, met flex-end onderaan, met center in het midden en met baseline staat de eerste regel tekst van elk item op één lijn.

Een handig koppel: justify-content werkt langs de hoofdas, align-items langs de dwarsas.

style.css

1.plein {2  display: flex;3  align-items: center;4}

foodtruck.example

Probeer het zelf

Zet de trucks samen in het midden van het plein, in de breedte en in de hoogte.

1.plein {2  display: flex;3}

1<link rel="stylesheet" href="style.css">2<main>3  <section class="plein hoog">4    <div class="truck friet">Friet</div>5    <div class="truck ijs">IJs</div>6    <div class="truck pizza">Pizza</div>7  </section>8</main>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fff8ec;5  color: #2b2118;6}7header {8  padding: 12px 16px;9  background: #264653;10  color: #ffffff;11}12header h1 {13  margin: 0;14  font-size: 1.5rem;15}16nav a {17  padding: 6px 10px;18  border-radius: 999px;19  color: #ffffff;20  text-decoration: none;21}22main {23  padding: 0 16px 24px;24}25.slogan {26  margin: 16px 0 0;27}28.plein {29  margin: 16px 0;30  padding: 12px;31  border-radius: 18px;32  background-color: #efe6d4;33  background-image: radial-gradient(rgb(110 90 60 / 0.16) 1px, transparent 1.5px);34  background-size: 14px 14px;35  box-shadow: inset 0 0 0 1px rgb(110 90 60 / 0.14);36}37.plein.hoog {38  height: 200px;39}40.plein.smal {41  max-width: 250px;42}43/* Een luifel met strepen en twee wielen: alleen voor de sier. */44.truck {45  position: relative;46  margin-bottom: 6px;47  padding: 16px 14px 12px;48  border-radius: 10px 10px 8px 8px;49  background-color: #e76f51;50  background-image: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.85) 0 7px, transparent 7px 14px);51  background-size: 100% 7px;52  background-repeat: no-repeat;53  box-shadow: 0 1px 1px rgb(43 33 24 / 0.12), 0 6px 12px -6px rgb(43 33 24 / 0.35);54  color: #ffffff;55  font-weight: 700;56}57.truck::before,58.truck::after {59  content: "";60  position: absolute;61  bottom: -5px;62  width: 10px;63  height: 10px;64  border-radius: 50%;65  background: #d9cfbb;66  box-shadow: inset 0 0 0 3px #2b2118;67}68.truck::before {69  left: 9px;70}71.truck::after {72  right: 9px;73}74.friet {75  background-color: #e9c46a;76  color: #3a2a00;77}78.taco {79  background-color: #e76f51;80}81.pizza {82  background-color: #2a9d8f;83}84.wafel {85  background-color: #9c6644;86}87.ijs {88  padding-top: 30px;89  padding-bottom: 26px;90  background-color: #f4a6c6;91  color: #4a1030;92}93.curry {94  background-color: #f4a261;95  color: #3a1f00;96}97.burger {98  background-color: #6d597a;99}100.soep {101  background-color: #588157;102}103.kaart {104  padding: 4px 16px;105  border-radius: 12px;106  background: #ffffff;107  box-shadow: 0 1px 2px rgb(43 33 24 / 0.08);108}109.kaart h2 {110  font-size: 1.15rem;111}112footer {113  padding: 12px 16px;114  background: #264653;115  color: #ffffff;116}

foodtruck.example

Elk genummerd item hoort op de stippellijn met hetzelfde nummer.

Klaar voor meer?

De volledige les heeft 5 oefeningen, van makkelijk naar uitdagend, met hints, punten en een reeks die je kan opbouwen.

Begin aan de les

De dwarsas

Dwars op de hoofdas loopt de dwarsas: in een rij is dat van boven naar onder. Met align-items op de container kies je waar de items op die as staan.

Een handig koppel: justify-content werkt langs de hoofdas, align-items langs de dwarsas.

style.css

1.plein {2  display: flex;3  align-items: center;4}

foodtruck.example

Probeer het zelf

Zet de trucks samen in het midden van het plein, in de breedte en in de hoogte.

1.plein {2  display: flex;3}

1<link rel="stylesheet" href="style.css">2<main>3  <section class="plein hoog">4    <div class="truck friet">Friet</div>5    <div class="truck ijs">IJs</div>6    <div class="truck pizza">Pizza</div>7  </section>8</main>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fff8ec;5  color: #2b2118;6}7header {8  padding: 12px 16px;9  background: #264653;10  color: #ffffff;11}12header h1 {13  margin: 0;14  font-size: 1.5rem;15}16nav a {17  padding: 6px 10px;18  border-radius: 999px;19  color: #ffffff;20  text-decoration: none;21}22main {23  padding: 0 16px 24px;24}25.slogan {26  margin: 16px 0 0;27}28.plein {29  margin: 16px 0;30  padding: 12px;31  border-radius: 18px;32  background-color: #efe6d4;33  background-image: radial-gradient(rgb(110 90 60 / 0.16) 1px, transparent 1.5px);34  background-size: 14px 14px;35  box-shadow: inset 0 0 0 1px rgb(110 90 60 / 0.14);36}37.plein.hoog {38  height: 200px;39}40.plein.smal {41  max-width: 250px;42}43/* Een luifel met strepen en twee wielen: alleen voor de sier. */44.truck {45  position: relative;46  margin-bottom: 6px;47  padding: 16px 14px 12px;48  border-radius: 10px 10px 8px 8px;49  background-color: #e76f51;50  background-image: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.85) 0 7px, transparent 7px 14px);51  background-size: 100% 7px;52  background-repeat: no-repeat;53  box-shadow: 0 1px 1px rgb(43 33 24 / 0.12), 0 6px 12px -6px rgb(43 33 24 / 0.35);54  color: #ffffff;55  font-weight: 700;56}57.truck::before,58.truck::after {59  content: "";60  position: absolute;61  bottom: -5px;62  width: 10px;63  height: 10px;64  border-radius: 50%;65  background: #d9cfbb;66  box-shadow: inset 0 0 0 3px #2b2118;67}68.truck::before {69  left: 9px;70}71.truck::after {72  right: 9px;73}74.friet {75  background-color: #e9c46a;76  color: #3a2a00;77}78.taco {79  background-color: #e76f51;80}81.pizza {82  background-color: #2a9d8f;83}84.wafel {85  background-color: #9c6644;86}87.ijs {88  padding-top: 30px;89  padding-bottom: 26px;90  background-color: #f4a6c6;91  color: #4a1030;92}93.curry {94  background-color: #f4a261;95  color: #3a1f00;96}97.burger {98  background-color: #6d597a;99}100.soep {101  background-color: #588157;102}103.kaart {104  padding: 4px 16px;105  border-radius: 12px;106  background: #ffffff;107  box-shadow: 0 1px 2px rgb(43 33 24 / 0.08);108}109.kaart h2 {110  font-size: 1.15rem;111}112footer {113  padding: 12px 16px;114  background: #264653;115  color: #ffffff;116}

foodtruck.example

Elk genummerd item hoort op de stippellijn met hetzelfde nummer.