Flexbox - Aperçu

Cascension Style Sheets (CSS) est un langage de conception simple destiné à simplifier le processus de présentation des pages Web. CSS gère l'aspect et la convivialité d'une page Web.

À l'aide de CSS, vous pouvez contrôler la couleur du texte, le style des polices, l'espacement entre les paragraphes, la taille et la disposition des colonnes, les images ou couleurs d'arrière-plan utilisées, les conceptions de mise en page, les variations d'affichage pour différents appareils et tailles d'écran ainsi que divers autres effets.

Pour déterminer la position et les dimensions des boîtes, en CSS, vous pouvez utiliser l'un des modes de mise en page disponibles -

• The block layout - Ce mode est utilisé pour la mise en page des documents.

• The inline layout - Ce mode est utilisé pour la mise en page du texte.

• The table layout - Ce mode est utilisé pour la mise en page des tableaux.

• The table layout - Ce mode est utilisé pour positionner les éléments.

Tous ces modes sont utilisés pour aligner des éléments spécifiques comme des documents, du texte, des tableaux, etc., cependant, aucun d'entre eux ne fournit une solution complète pour mettre en page des sites Web complexes. Initialement, cela est utilisé en utilisant une combinaison d'éléments flottants, d'éléments positionnés et de disposition de table (souvent). Mais les flotteurs ne permettent que de positionner horizontalement les boîtes.

Qu'est-ce que Flexbox?

En plus des modes mentionnés ci-dessus, CSS3 fournit un autre mode de mise en page Boîte flexible, communément appelé Flexbox.

En utilisant ce mode, vous pouvez facilement créer des mises en page pour des applications et des pages Web complexes. Contrairement aux flotteurs, la disposition Flexbox donne un contrôle complet sur la direction, l'alignement, l'ordre et la taille des boîtes.

Caractéristiques de Flexbox

Voici les caractéristiques notables de la disposition Flexbox -

• Direction - Vous pouvez organiser les éléments sur une page Web dans n'importe quelle direction, par exemple de gauche à droite, de droite à gauche, de haut en bas et de bas en haut.

• Order - En utilisant Flexbox, vous pouvez réorganiser l'ordre du contenu d'une page Web.

• Wrap - En cas d'espace incohérent pour le contenu d'une page Web (en une seule ligne), vous pouvez les envelopper sur plusieurs lignes (à la fois horizontalement) et verticalement.

• Alignment - En utilisant Flexbox, vous pouvez aligner le contenu de la page Web par rapport à leur conteneur.

• Resize - En utilisant Flexbox, vous pouvez augmenter ou diminuer la taille des éléments de la page pour tenir dans l'espace disponible.

Navigateurs pris en charge

Voici les navigateurs prenant en charge Flexbox.

• Chrome 29+
• Firefox 28+
• Internet Explorer 11+
• Opera 17+
• Safari 6.1 ou version ultérieure
• Android 4.4+
• iOS 7.1+