Leer CSS Layout

flexbox

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;
}

Flexbox is zo simpel!

</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;
}

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>

Ongeacht alles, zal ik altijd 200px zijn.

</div>

Ik zal 1/3 van de resterende width opvullen.

</div>

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>

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

</div>