Hartjes voor Flexbox

Voor WordPress-gebruikers die in de context van bijvoorbeeld een blogbericht iets – tekst, afbeeldingen, inhoud tout court – in blokken of kolommen willen weergeven, komt Gutenberg eraan.

Tot voor kort kwamen heel wat ‘developers’ echter al snel bij Visual Composer en soortgelijke page builder-plugins terecht: oplossingen met een behoorlijke leercurve, die vaak ook enorm veel shortcodes in je berichten injecteren, zodat je er later amper nog vanaf komt.

Developers, daarentegen, hadden al die tijd – hebben nog steeds! – een alternatief in de vorm van CSS’ Flexbox.

Hé, Flexbox!

Nood aan twee kolommetjes en weinig vertrouwen in floats – of CSS Grid? Drie div’s – of, indien dat steek houdt, een meer betekenisvol element à la aside – en een handvol regels CSS, en klaar is Kees!

<div class="row">
  <div class="col">Kolom 1</div>
  <div class="col">Kolom 2</div>
</div>
.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.col {
  width: 47.5%;
}

Liever drie kolommetjes? Dat kan!

.col {
  width: 30%;
}

En het werkt nog in alle browsers ook! (En ja, CSS Grid ís nieuwer, maar met name voor eendimensionale ‘blokjes’ werkt Flexbox gewoon zó fijn. If it ain’t broke …)

Zelf doen?

Die paar regeltjes CSS kun je nog het best kwijt onder Weergave › Customizer › Extra CSS. HTML-code geef je gewoon in je bericht in, in de teksteditor (en niet de visuele editor).

Responsief? Zo!

De combinatie van Flexbox en percentages is sowieso fluid, maar echt responsief (én mobile-first) wordt het wanneer je de kolombreedte pas vanaf een zekere schermbreedte instelt:

.col {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .col {
    width: 30%;
  }
}

Oordeel zelf

Dat het écht zo simpel is, zie je hieronder nog eens in een CodePen-voorbeeldje.

Meer lezen?

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *