Auto-layout, une des nouveautés Bootstrap 4 alpha 6.0

Le 6 janvier dernier, Bootstrap 4 en version alpha 6 est passé 100% flexbox. Clairement, cela offre de nombreuses possibilités de customisations.
Flexbox c’est quoi ?

Alpha 6 is here! Dropped IE9, went full flexbox, updated navbar, more grid features, better utilities, and more. https://t.co/1jRotZ4JHI

— Bootstrap (@getbootstrap) January 6, 2017

Flexbox c’est quoi ?

Flexbox, un petit nouveau qui va faire du bien ! Voici un petit résumé tiré du site Mozilla Developer Network (MDN) :

Flexbox (pour flexible box) est un mode de mise en page prévoyant une disposition des éléments d’une page de telle sorte que ces éléments possèdent un comportement prévisible lorsqu’ils doivent s’accommoder de différentes tailles d’écrans/appareils. Dans de nombreux cas, le modèle de boîte Flexbox offre une amélioration du modèle block dans lequel les flottements float ne sont pas utilisés, pas plus que la fusion des marges du conteneur flex avec ses éléments.

Beaucoup de designers trouveront le modèle de flexbox plus simple à utiliser. Les éléments enfants d’une flexbox peuvent être placés dans n’importe quelle direction et peuvent avoir des dimensions pour s’adapter à la place disponible. Positionner les éléments enfants est ainsi plus simple et les agencements complexes peuvent être mis en place plus simplement et avec un code plus propre, étant donné que l’ordre d’affichage des éléments est indépendant de leur ordre dans le code source.

Concrètement, flexbox nous permettra d’afficher le contenu en changeant l’ordre des éléments sans générer du contenu supplémentaire « caché » selon la vue appliquée.

Découverte de l’auto-layout

Rien de bien compliqué dans l’absolu.
Cependant, cela va changer radicalement votre façon d’organiser votre grille.

L’auto-layout comme son nom l’indique permet d’ajuster le contenu en fonction. Si vous utilisez 3 col (colonnes) dans une row, le contenu s’adaptera automatiquement sans utiliser les préfixes de vue tel que xl ou sm.

<div class="container">
<div class="row">
<div class="col">1 of 3</div>
<div class="col">1 of 3</div>
<div class="col">1 of 3</div>
</div>
</div>

 
L’ajustement de vos colonnes peut se faire de façon plus précise.
Dans de nombreux cas, nous avons besoin de définir au moins une largeur minimum pour une ou plusieurs colonnes composant notre ligne.
Bootstrap 4 nous permettra de le faire et d’adapter la largeur des colonnes non définies en fonction des autres.

<div class="container">
<div class="row">
<div class="col">3 sur 12</div>
<div class="col-6">6 sur 12</div>
<div class="col">3 sur 12</div>
</div>
</div>