over deze website

De nieuwe flexbox layout mode is gereed om de manier hoe we layouts in CSS doen opnieuw te definiëren. Helaas is de specificatie de laatste tijd vaak gewijzigd, waardoor verschillende browsers verschillende implementaties hebben gedaan. Maar toch wil ik een aantal voorbeelden met je delen zodat je in kan zien wat er te wachten staat. Deze voorbeelden werken vooralsnog alleen op de Chrome flexbox implementatie, gebaseerd op de laatste versie van de standaard.

Er zijn veel gedateerde flexbox resources verspreid. Als je meer wilt leren over flexbox start hier en leer onder andere hoe een nieuwe of gedateerde resource te ontdekken. Ik heb een gedetailleerd artikel gebaseerd op de laatste syntax geschreven.

Er is zoveel meer wat je met flexbox kan doen, hier een paar voorbeelden om je een idee te geven:

Eenvoudige Layout met Flexbox

.container {
  display: -webkit-flex;
  display: flex;
}
nav {
  width: 200px;
}
.flex-column {
  -webkit-flex: 1;
          flex: 1;
}
<div class="container">
<div class="flex-column">
<section>

Flexbox is zo simpel!

</section>
<section>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.

</section>
</div>

Fancy Layout met Flexbox

.container {
  display: -webkit-flex;
  display: flex;
}
.initial {
  -webkit-flex: initial;
          flex: initial;
  width: 200px;
  min-width: 100px;
}
.none {
  -webkit-flex: none;
          flex: none;
  width: 200px;
}
.flex1 {
  -webkit-flex: 1;
          flex: 1;
}
.flex2 {
  -webkit-flex: 2;
          flex: 2;
}
<div class="initial">

Ik zal 200px zijn als er meer ruimte is, en ik zal krimpen tot 100px als er geen ruimte meer is maar niet kleiner dan dat.

</div>
<div class="none">

Ongeacht alles, zal ik altijd 200px zijn.

</div>
<div class="flex1">

Ik zal 1/3 van de resterende width opvullen.

</div>
<div class="flex2">

Ik zal 2/3 van de resterende width opvullen.

</div>

Centreren met Flexbox

.vertical-container {
  height: 300px;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}
<div class="vertical-container">
<div>

Eindelijk is het makkelijk om iets verticaal te centreren in CSS!

</div>
</div>