Ce qu'un chauffe-eau en panne et des boîtes humides m'ont appris sur la flexbox.

Notre chauffe-eau est tombé en panne. Je suis entré dans le garage et j'ai entendu de l'eau couler. J'ai vérifié les robinets de la maison, les toilettes ne fonctionnaient pas, vérifié à l'extérieur. non, arrosez. revérifiez que le garage entend toujours de l'eau, peut-être que c'est juste du bruit lorsque le gaz chauffe l'eau. Approchez-vous et il y a de l'eau dans le sol.

Le chauffe-eau fuyait par le haut. Il y a des flaques d'eau sur le sol et à travers la moquette. Nous avons un vieux tapis sur le sol, donc ce n'est pas un sol nu et froid. Il est désormais traversé par un flux.

Les cartons stockés sur le tapis ont évacué de l'eau. Les cartons sont mouillés et détrempés. Il en va de même pour certains contenus. Il y avait quelques livres de poche et des dinosaures de Jurassic Park dans ces boîtes. Les livres sont endommagés par l'eau mais la plupart vont sécher.

Ces boîtes ne sont plus solides elles sont flexibles.

Ces boîtes = flexbox. Ce qui m'a donné un titre comme un appât à clics sur LinkedIn et une excuse pour écrire sur flexbox.

Boîte flexible

En CSS, flexbox est utilisé pour organiser les éléments horizontalement ou verticalement en lignes ou en colonnes. Les articles se plieront pour remplir l'espace dans le conteneur.

Pour commencer à utiliser flex, ajoutez display:flex au conteneur flex parent dans lequel vous souhaitez contenir vos éléments enfants.

.flex-container {
  display: flex;
}

<flex-container>
  <div>



<p>Then decide if you want row or columns with flex-directionoptions are row, row-reverse, column, and column-reverse. Row lines things up left-to-right, row-reverse lines them right-to-left. You might guess Column and column-reverse are similar but top-to-bottom and bottom-to-top respectively.<br>
</p>

<pre class="brush:php;toolbar:false">.flex-container {
  display: flex;
  flex-direction: row;
}

<flex-container>
  <div>



<h2>
  
  
  Justify Content
</h2>

<p>So how to arrange things horizontally? Use justify-content: to align the books in your boxes. Here you have several options.</p>

<ul>
<li>justify-content: center - Aligns items in the center of the container.</li>
<li>justify-content: space-around - Places space at the front and end of the container plus in between each item.</li>
<li>justify-content: space-between - Pushes items to the front and end of the container and place space evenly between the items.</li>
<li>justify-content: flex-start (default) - Aligns at the start of the container.</li>
<li>justify-content: flex-end - Aligns at end of container.
</li>
</ul>

<pre class="brush:php;toolbar:false">.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: center; 
}

Cette image montre les livres centrés dans la boîte.

Cette image montre les livres avec un espace autour appliqué. Il y a des écarts entre le début et la fin de la boîte.

Cette image montre les livres avec un espace entre les deux. Les livres sont poussés vers l'avant, le centre et l'extrémité de la boîte avec un espace entre eux.

Cette image montre le démarrage flexible. Tous les livres sont poussés au début ou sur le côté gauche de la boîte.

Cette image montre l'extrémité flexible. Tous les livres sont poussés au fond ou sur le côté droit de la boîte.

Alignement

Utilisez align-items pour aligner verticalement les éléments à l'intérieur du conteneur parent.

• align-items : flex-start - Aligne en haut du conteneur
• align-items : flex-end - Aligner au bas du conteneur
• align-items: center - Place les éléments au centre vertical
• align-items: baseline - Aligne le long de la ligne de base à l'intérieur de chaque élément.
• align-items : stretch (par défaut) - Étire les éléments pour remplir la hauteur du conteneur.

.flex-container {
  display: flex;
}

Illustré avec CSS. Ces images ont été réalisées en CSS.

Conclusion

Ceci n'est qu'une introduction à flexbox, consultez What the flex box de Wes Bos ou MDN Web Docs pour des explications plus détaillées.