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 ? […]

Posté le par Benoît Philibert|954 vues

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 ?

 

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.

 

flex box layout
Exemple flexbox

 

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>

 

 


Ces articles pourraient vous intéresser

Tags

1 commentaire

Commenter
Votre adresse email ne sera pas publiée. Champs obligatoire *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.