Disposition flexible des boîtes
Avec l'avènement de la CSS Flexible Box , de nombreux cauchemars de concepteurs Web 1 ont été résolus. L'un des plus hackeux, l'alignement vertical. Maintenant, c'est possible même dans des hauteurs inconnues .
"Deux décennies de hacks de mise en page touchent à leur fin. Peut-être pas demain, mais bientôt, et pour le reste de nos vies."
- Le légendaire CSS Eric Meyer au W3Conf 2013
Flexible Box (ou en bref, Flexbox), est un nouveau système de mise en page spécialement conçu à des fins de mise en page. La spécification stipule :
La disposition flexible est superficiellement similaire à la disposition de bloc. Il manque de nombreuses propriétés plus complexes, centrées sur le texte ou le document, qui peuvent être utilisées dans la disposition des blocs, telles que les flottants et les colonnes. En retour, il gagne des outils simples et puissants pour distribuer l'espace et aligner le contenu de la manière dont les applications Web et les pages Web complexes ont souvent besoin.
Comment cela peut-il aider dans ce cas? Voyons voir.
Colonnes alignées verticalement
En utilisant Twitter Bootstrap, nous avons .rowdes .col-*s. Tout ce que nous devons faire est d'afficher le .row2 souhaité comme une boîte de conteneur flexible , puis d'aligner verticalement tous ses éléments flexibles (les colonnes) par align-itemspropriété.
EXEMPLE ICI (Veuillez lire attentivement les commentaires)
<div class="container">
<div class="row vertical-align"> <!--
^-- Additional class -->
<div class="col-xs-6"> ... </div>
<div class="col-xs-6"> ... </div>
</div>
</div>
.vertical-align {
display: flex;
align-items: center;
}
Le résultat
La zone colorée affiche la zone de remplissage des colonnes.
Clarification sur align-items: center
8.3 Alignement transversal: la align-itemspropriété
Les éléments flexibles peuvent être alignés dans l' axe transversal de la ligne actuelle du conteneur flexible, de manière similaire justify-contentmais perpendiculaire. align-itemsdéfinit l'alignement par défaut pour tous les éléments du conteneur flexible, y compris les éléments flexibles anonymes .
align-items: center;
Par valeur centrale, la zone de marge de l' élément flexible est centrée dans l' axe transversal de la ligne.
Grande alerte
Remarque importante # 1: Twitter Bootstrap ne spécifie pas le nombre widthde colonnes dans les très petits appareils, sauf si vous donnez une des .col-xs-#classes aux colonnes.
Par conséquent, dans cette démo particulière, j'ai utilisé des .col-xs-*classes pour que les colonnes soient affichées correctement en mode mobile, car cela spécifie widthexplicitement la colonne.
Mais encore , vous pouvez désactiver l'Flexbox layout en changeant simplement display: flex;à display: block;des tailles d'écran spécifiques. Par exemple:
/* Extra small devices (767px and down) */
@media (max-width: 767px) {
.row.vertical-align {
display: block; /* Turn off the flexible box layout */
}
}
Ou vous pouvez spécifier .vertical-align uniquement sur des tailles d'écran spécifiques comme ceci:
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
.row.vertical-align {
display: flex;
align-items: center;
}
}
Dans ce cas, je partirais avec @KevinNelson de l' approche .
Remarque importante n ° 2: les préfixes du fournisseur ont été omis en raison de la brièveté. La syntaxe de Flexbox a été modifiée au cours du temps. La nouvelle syntaxe écrite ne fonctionnera pas sur les anciennes versions des navigateurs Web (mais pas aussi anciennes qu'Internet Explorer 9! Flexbox est pris en charge sur Internet Explorer 10 et versions ultérieures).
Cela signifie que vous devez également utiliser des propriétés préfixées par le fournisseur comme display: -webkit-boxet ainsi de suite en mode production.
Si vous cliquez sur "Basculer la vue compilée" dans la démo , vous verrez la version préfixée des déclarations CSS (grâce à Autoprefixer ).
Colonnes pleine hauteur avec contenu aligné verticalement
Comme vous le voyez dans la démo précédente , les colonnes (les éléments flexibles) ne sont plus aussi hautes que leur conteneur (la boîte du conteneur flexible, c'est-à-dire l' .rowélément).
Cela est dû à l'utilisation de la centervaleur pour la align-itemspropriété. La valeur par défaut est de stretchsorte que les éléments puissent remplir toute la hauteur de l'élément parent.
Pour résoudre ce problème, vous pouvez également ajouter display: flex;aux colonnes:
EXEMPLE ICI (Encore une fois, faites attention aux commentaires)
.vertical-align {
display: flex;
flex-direction: row;
}
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
display: flex;
align-items: center; /* Align the flex-items vertically */
justify-content: center; /* Optional, to align inner flex-items
horizontally within the column */
}
Le résultat
La zone colorée affiche la zone de remplissage des colonnes.
Enfin, notez que les démos et les extraits de code ici sont destinés à vous donner une idée différente, à fournir une approche moderne pour atteindre l'objectif. Veuillez noter la section " Big Alert " si vous comptez utiliser cette approche dans des sites Web ou des applications du monde réel.
Pour une lecture plus approfondie, y compris la prise en charge du navigateur, ces ressources seraient utiles:
1. Alignez verticalement une image à l'intérieur d'un div avec une hauteur réactive
2. Il est préférable d'utiliser une classe supplémentaire afin de ne pas modifier la valeur par défaut de Twitter Bootstrap .row.
div, pas le texte à l'intérieur, quelque chose comme ça jsfiddle.net/corinem/Aj9H9 mais dans cet exemple je n'utilise pas bootstrap