Flexbox, de toekomst van responsive design

Responsive webdesign is inmiddels de nieuwe standaard geworden. Je website moet in 2015 responsive zijn. De ontwikkelingen staan niet stil. Er gebeurt veel op het gebied van responsive en adaptive design. Eén van deze ontwikkelingen is Flexbox, een techniek waar al vanaf 2009 aan gewerkt wordt. Door de beperkte browsercompatibiliteit en kinderziektes werd deze techniek nog weinig toegepast. We zijn nu echter in een stadium beland waar we deze techniek in productie omgevingen kunnen gebruiken. Flexbox lijkt de toekomst van responsive webdesign te gaan worden.

Wat is Flexbox

Flexbox is een CSS model voor het positioneren van HTML-elementen. Het is een ideale techniek voor de ontwikkeling van een responsive layout. Gefloate en absoluut gepositioneerde elementen zijn met deze techniek verleden tijd. Het grote voordeel van Flexbox is dat het een volwaardig CSS model is die je volledige controle geeft over de zaken die belangrijk zijn bij een responsive grid. Denk daarbij bijvoorbeeld aan de uitlijning en sortering van HTML-elementen. Daarnaast heb je geen onnodige divs of clears meer nodig. Populaire frameworks zoals Bootstrap en Foundation experimenteren op dit moment al met Flexbox.

Flexbox in de praktijk

Zoals gezegd is Flexbox niet zomaar een CSS selector maar een volwaardig CSS model. Flexbox biedt veel mogelijkheden. In onderstaand voorbeeld combineer ik een fixed grid met een fluid grid. In feite is het een aanvulling op mijn eerder geplaatste blog over het combineren van een responsive grid met een fixed grid binnen Bootstrap. De HTML is vrij eenvoudig:

<div class="wrapper">
	<div class="content">
		Dit is het content vlak met een schaalbare breedte.
	</div>

	<div class="sidebar">
		Dit is de sidebar met een vaste breedte.
	</div>
</div>

De CSS is niet veel ingewikkelder:

.wrapper {
    display: flex;
}

.sidebar {
    background: #ccc;

    padding: 20px;

    width: 200px;
}

.content {
    background: #eee;

    padding: 20px;

    flex: 1;
}

Hier zie je direct de kracht van Flexbox. Het is een stuk eenvoudiger om fixed en fluid grids te combineren. Dit voorbeeld is eenvoudig uit te breiden met een extra kolom. Deze zal automatisch de juiste breedte krijgen. Daarnaast is het een fluitje van een cent om de mobiele weergave aan te passen.

@media (max-width: 767px) {
 	.wrapper {
 		flex-wrap: wrap;
 	}

 	.sidebar {
 		order: 0;

 		width: 100%;
	}

	.content {
		order: 1;
	}
}

Voor de volledigheid heb ik hier een Fiddle van gemaakt om de werking te kunnen bekijken.