CSS
Disposition de la boîte flexible (Flexbox)

Introduction

Syntaxe

• affichage: flex;
• flex-direction: row | ligne inverse | colonne | colonne inversée;
• flex-wrap: nowrap | envelopper | wrap-reverse;
• flex-flow: <'flex-direction'> || <'flex-wrap'>
• Justification-content: flex-start | flex-end | centre | espace-entre | espace autour
• align-items: flex-start | flex-end | centre | ligne de base | étendue;
• align-content: flex-start | flex-end | centre | espace-entre | espace autour | étendue;
• ordre: <entier>;
• flex-grow: <nombre>; / * par défaut 0 * /
• flex-shrink: <numéro>; / * par défaut 1 * /
• base flexible: <longueur> | auto; / * auto par défaut * /
• flex: none | [<'flex-grow'> <'flex-shrink'> "? || <'flex-basis'>]
• align-self: auto | flex-start | flex-end | centre | ligne de base | étendue;

Remarques

Pied collant à hauteur variable

Ce code crée un bas de page collant. Lorsque le contenu n'atteint pas la fin de la fenêtre, le pied de page reste en bas de la fenêtre d'affichage. Lorsque le contenu dépasse le bas de la fenêtre, le pied de page est également sorti de la fenêtre d'affichage. Voir résultat

HTML:

<div class="header">
  <h2>Header</h2>
</div>

<div class="content">
  <h1>Content</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. </p>
</div>

<div class="footer">
  <h4>Footer</h4>
</div>

CSS:

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  /* Include `0 auto` for best browser compatibility. */
  flex: 1 0 auto;
}

.header, .footer {
  background-color: grey;
  color: white;
  flex: none;
}

Holy Grail Layout utilisant Flexbox

La disposition de Holy Graal est une disposition avec un en-tête et un pied de page de hauteur fixe, et un centre avec 3 colonnes. Les 3 colonnes incluent un sidenav de largeur fixe, un centre fluide et une colonne pour d'autres contenus comme les annonces (le centre fluide apparaît en premier dans le balisage). CSS Flexbox peut être utilisé pour y parvenir avec un balisage très simple:

Balisage HTML:

<div class="container">
  <header class="header">Header</header>
  <div class="content-body">
    <main class="content">Content</main>
    <nav class="sidenav">Nav</nav>
    <aside class="ads">Ads</aside>
  </div>
  <footer class="footer">Footer</footer>
</div>

CSS:

body {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  flex: 0 0 50px;
}

.content-body {
  flex: 1 1 auto;
  
  display: flex;
  flex-direction: row;
}

.content-body .content {
  flex: 1 1 auto;
  overflow: auto;
}

.content-body .sidenav {
  order: -1;
  flex: 0 0 100px;
  overflow: auto;
}

.content-body .ads {
  flex: 0 0 100px;
  overflow: auto;
}

.footer {
  flex: 0 0 50px;
}

Démo

Boutons parfaitement alignés à l'intérieur des cartes avec flexbox

De nos jours, il s'agit d'un modèle de conception consistant à aligner verticalement l' appel à des actions à l' intérieur de ses cartes contenant les éléments suivants:

Cela peut être réalisé en utilisant un tour spécial avec flexbox

HTML

<div class="cards">
  <div class="card">
    <p>Lorem ipsum Magna proident ex anim dolor ullamco pariatur reprehenderit culpa esse enim mollit labore dolore voluptate ullamco et ut sed qui minim.</p>
    <p><button>Action</button></p>
  </div>
  <div class="card">
    <p>Lorem ipsum Magna proident ex anim dolor ullamco pariatur reprehenderit culpa esse enim mollit labore dolore voluptate ullamco et ut sed qui minim.</p>
    <p>Lorem ipsum Magna proident ex anim dolor ullamco pariatur reprehenderit culpa esse enim mollit labore dolore voluptate ullamco et ut sed qui minim.</p>
    <p>Lorem ipsum Magna proident ex anim dolor ullamco pariatur reprehenderit culpa esse enim mollit labore dolore voluptate ullamco et ut sed qui minim.</p>
    <p>Lorem ipsum Magna proident ex anim dolor ullamco pariatur reprehenderit culpa esse enim mollit labore dolore voluptate ullamco et ut sed qui minim.</p>
    <p><button>Action</button></p>
  </div>
</div>

Tout d'abord, nous utilisons CSS pour appliquer l' display: flex; au conteneur. Cela va créer 2 colonnes égales en hauteur avec le contenu qui circule naturellement à l'intérieur

CSS

.cards {
    display: flex;
}
.card {
    border: 1px solid #ccc;
    margin: 10px 10px;
    padding: 0 20px;
}
button {
    height: 40px;
    background: #fff;
    padding: 0 40px;
    border: 1px solid #000;
}
p:last-child {
    text-align: center;
}

La mise en page changera et deviendra comme ceci:

Pour déplacer les boutons au bas du bloc, nous devons appliquer l’ display: flex; à la carte elle-même avec la direction définie sur column . Après cela, nous devrions sélectionner le dernier élément à l'intérieur de la carte et définir le margin-top sur auto . Cela poussera le dernier paragraphe au bas de la carte et atteindra le résultat requis.

CSS final:

.cards {
    display: flex;
}
.card {
    border: 1px solid #ccc;
    margin: 10px 10px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
}
button {
    height: 40px;
    background: #fff;
    padding: 0 40px;
    border: 1px solid #000;
}
p:last-child {
    text-align: center;
    margin-top: auto;
}

Centrage vertical et horizontal dynamique (éléments d'alignement, contenu justifié)

Exemple simple (centrage d'un seul élément)

HTML

<div class="aligner">
  <div class="aligner-item">…</div>
</div>

CSS

.aligner {
  display: flex; 
  align-items: center;
  justify-content: center;
}

.aligner-item {
  max-width: 50%; /*for demo. Use actual width instead.*/
}

Voici une démo .

Raisonnement

Exemples de propriétés individuelles

Tous les styles ci-dessous sont appliqués sur cette mise en page simple:

<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>

où #container est le flex-box .

Exemple: justify-content: center sur un flexbox horizontal

CSS:

div#container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

Résultat:

Voici une démo .

Exemple: justify-content: center sur un flexbox vertical

CSS:

div#container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Résultat:

Voici une démo .

Exemple: align-content: center sur un flexbox horizontal

CSS:

div#container {
  display: flex;
  flex-direction: row;
  align-items: center;
}

Résultat:

Voici une démo .

Exemple: align-content: center sur un flexbox vertical

CSS:

div#container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

Résultat:

Voici une démo .

Exemple: Combinaison pour centrage sur flexbox horizontal

div#container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

Résultat:

Voici une démo .

Exemple: Combinaison pour centrer les deux sur la boîte flexible verticale

div#container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

Résultat:

Voici une démo .

Même hauteur sur les conteneurs imbriqués

Ce code garantit que tous les conteneurs imbriqués ont toujours la même hauteur. Cela se fait en s'assurant que tous les éléments imbriqués ont la même hauteur que le div parrent contenant. Voir exemple de travail : https://jsfiddle.net/3wwh7ewp/

Cet effet est obtenu car les propriétés align-items sont définies pour stretch par défaut.

HTML

<div class="container">
  <div style="background-color: red">
    Some <br />
    data <br />
    to make<br />
    a height <br />
 </div>
  <div style="background-color: blue">
    Fewer <br />
    lines <br />
 </div>
</div>

CSS

.container {
    display: flex;
    align-items: stretch; // Default value
}

Note: Ne fonctionne pas sur les versions IE sous 10

Ajuster les éléments de manière optimale à leur conteneur

L'une des fonctionnalités les plus intéressantes de Flexbox est de permettre l'adaptation optimale des conteneurs à leur élément parent.

Démo en direct .

HTML:

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
</div>

CSS:

.flex-container {
    background-color: #000;
    height: 100%;
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: stretch;
}

.flex-item {
    background-color: #ccf;
    margin: 0.1em;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 200px; /* or % could be used to ensure a specific layout */
}

Résultat:

Les colonnes s'adaptent à mesure que l'écran est redimensionné.