DERNIÈRES NOUVELLES

Nos réflexions sur la conception et le développement de logiciels

Guide complet de Flexbox en 20 minutes

La CSS3 Flexible Box, ou flexbox , est un mode de mise en page permettant d’organiser des éléments sur une page de sorte que les éléments se comporter de manière prévisible lorsque la disposition de la page doit contenir différentes tailles d’écran et différents dispositifs d’affichage.

La source:www.css-tricks.com

Contexte

Le module Flexbox Layout (Flexible Box) (actuellement un W3C Last Call Work Draft) vise à fournir un moyen plus efficace d’établir, d’aligner et de distribuer de l’espace parmi les objets dans un conteneur, même si leur taille est inconnue et / ou dynamique (ainsi le mot « flex »). L’idée principale derrière la disposition de flex est de donner au conteneur la possibilité de modifier la largeur / hauteur (et l’ordre) de ses éléments pour mieux remplir l’espace disponible (principalement pour s’adapter à tous les types d’appareils d’affichage et tailles d’écran). Un conteneur Flex développe les éléments pour remplir l’espace libre disponible, ou les rétrécit pour empêcher le débordement. Plus important encore, la disposition de la flexbox est agnostique de direction par opposition aux mises en page habituelles (bloc basé verticalement et en ligne qui est basé horizontalement). Bien que ceux qui fonctionnent bien pour les pages, ils manquent de flexibilité (sans jeu de mots) pour supporter des applications importantes ou complexes (en particulier en ce qui concerne l’orientation, le redimensionnement, l’étirement, le rétrécissement, etc.). Remarque: la mise en page Flexbox est la plus appropriée aux composants d’une application et aux mises en page à petite échelle, tandis que la disposition Grid est destinée à des mises en page plus vastes.

Bases & amp; Terminologie

Propriétés pour le parent
(conteneur flexible)

#display

Ceci définit un conteneur flexible; en ligne ou en bloc en fonction de la valeur donnée. Il permet un contexte flexible pour tous ses enfants directs.

.container {
  display: flex; /* or inline-flex */
}

Notez que les colonnes CSS n’ont aucun effet sur un conteneur flexible.

#flex-direction


Ceci établit l’axe principal, définissant ainsi la direction, les éléments flexibles sont placés dans le conteneur flexible. Flexbox est (en dehors de l’emballage optionnel) un concept de mise en page à sens unique. Pensez aux éléments flexibles comme étant principalement en ligne horizontale ou en colonnes verticales.

.container {
  flex-direction:rangée | Row-reverse | colonne | colonne inversée;
}
  • ligne (par défaut): de gauche à droite dans ltr ; de droite à gauche dans rtl
  • row-reverse : de droite à gauche dans ltr ; de gauche à droite dans rtl
  • colonne : identique à row mais de haut en bas
  • column-reverse : identique à row-reverse mais en bas en haut

#flex-wrap

Par défaut, les éléments flexibles essayeront tous d’intégrer une seule ligne. Vous pouvez modifier cela et permettre aux éléments de s’enrouler selon les besoins de cette propriété.

.container{
  flex-wrap:nowrap | envelopper | wrap-reverse;
}
  • nowrap (par défaut): tous les éléments flexibles seront sur une seule ligne
  • wrap : les éléments flexibles seront enveloppés sur plusieurs lignes, de haut en bas.
  • wrap-reverse : les éléments flexibles seront enveloppés sur plusieurs lignes de bas en haut.

Il y a quelquesdémos visuelles de flex-wrap ici.

#Flex-flow (S’applique à: element parent container flexible)

Il s’agit d’une sténographie flex-direction et flex-wrap qui définissent ensemble les axes principaux et transversaux du conteneur flexible. La valeur par défaut est row nowrap .

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

#justify-content


Ceci définit l’alignement le long de l’axe principal. Il aide à distribuer de l’espace libre supplémentaire lorsque tous les éléments flexibles sur une ligne sont inflexibles ou sont flexibles mais ont atteint leur taille maximale. Il exerce également un certain contrôle sur l’alignement des éléments lorsqu’ils dépassent la ligne.

.container {
  justify-content: flex-start | flex-end | centre | espace entre | espace autour;
}
  • flex-start (par défaut): les éléments sont emballés vers la ligne de départ
  • flex-end : les éléments sont emballés vers la ligne de fin
  • centre : les éléments sont centrés le long de la ligne
  • space-between : les éléments sont répartis uniformément dans la ligne; le premier élément est sur la ligne de départ, dernier élément sur la ligne de fin
  • space-around : les éléments sont uniformément répartis dans la ligne avec un espace égal autour d’eux. Notez que visuellement les espaces ne sont pas égaux, car tous les éléments ont un espace égal des deux côtés. Le premier élément aura une unité d’espace contre le bord du conteneur, mais deux unités d’espace entre l’élément suivant, car cet élément suivant a son propre espacement qui s’applique.

#align-items


Cela définit le comportement par défaut de la manière dont les éléments flexibles sont disposés le long de l’axe transversal sur la ligne actuelle. Pensez-y comme la version justify-content pour l’axe transversal (perpendiculaire à l’axe principal).

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
  • flex-start : le bord de la marge de démarrage croisé des éléments est placé sur la ligne de démarrage croisé
  • flex-end : le bord de la marge de bord des objets est placé sur la ligne de fond de gamme
  • centre : les éléments sont centrés dans les axes transversaux
  • ligne de base : les éléments sont alignés tels que leurs lignes de base alignent
  • stretch (par défaut): étirez pour remplir le conteneur (respecter toujours min-width / max-width)

#align-content


Cela aligne les lignes d’un conteneur flexible dans le cas où il y a un espace supplémentaire dans l’axe transversal, semblable à la façon dont justifier-contenu aligne les éléments individuels dans l’axe principal.

Remarque: cette propriété n’a aucun effet lorsqu’il n’y a qu’une seule ligne d’éléments flex.

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
  • flex-start : lignes remplies au début du conteneur
  • flex-end : lignes emballées à la fin du conteneur
  • centre : lignes emballées au centre du conteneur
  • espace-entre : lignes uniformément réparties; la première ligne est au début du conteneur tandis que la dernière est à la fin
  • space-around : lignes uniformément réparties avec un espace égal autour de chaque ligne
  • stretch (par défaut): les lignes sont étirées pour occuper l’espace restant

Propriétés pour les enfants
(éléments flexibles)

#order


Par défaut, les éléments flexibles sont définis dans l’ordre source. Cependant, la propriété order contrôle l’ordre dans lequel ils apparaissent dans le conteneur flexible.

.item {
  order: <integer>;
}

#flex-grow


Cela définit la capacité d’un élément flexible à se développer si nécessaire. Il accepte une valeur sans unité qui sert de proportion. Il dicte la quantité d’espace disponible dans le conteneur flexible que l’objet devrait prendre.

Si tous les éléments ont flex-grow mis à 1, l’espace restant dans le conteneur sera distribué de manière égale à tous les enfants. Si l’un des enfants a une valeur de 2, l’espace restant prendrait deux fois plus d’espace que les autres (ou il tentera au moins).

.item {
  flex-grow: <number>; /* default 0 */
}

Les nombres négatifs ne sont pas valides.

#flex-shrink

Cela définit la possibilité pour un élément flexible de rétrécir si nécessaire.

.item {
  flex-shrink: <number>; /* default 1 */
}

Les nombres négatifs ne sont pas valides.

#flex-basis

Définit la taille par défaut d’un élément avant que l’espace restant ne soit distribué. Cela peut être une longueur (par exemple 20%, 5rem, etc.) ou un mot-clé. Le mot-clé auto signifie « regarder ma propriété de largeur ou hauteur » (qui a été temporairement effectuée par le mot-clé main-size jusqu’à ce qu’il soit obsolète). Le mot-clé contenu signifie « taille en fonction du contenu de l’élément » – ce mot-clé n’est pas encore bien supporté, il est donc difficile de tester et plus difficile de savoir ce que ses frères max-content , min-content et fit-content font.

.item {
  flex-basis: <length> | auto; /* default auto */
}

Si défini sur 0 , l’espace supplémentaire autour du contenu n’est pas pris en compte. Si défini sur auto , l’espace supplémentaire est distribué en fonction de son flex -grow value.Voir ce graphique.

#flex

C’est le raccourci pour flex-grow, flex-shrink et flex-basis combiné. Les deuxième et troisième paramètres ( flex-shrink et flex-base ) sont facultatifs. La valeur par défaut est 0 1 auto .

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

Il est recommandé d’utiliser cette propriété abréte plutôt que de définir les propriétés individuelles. La main courte définit les autres valeurs de manière intelligente.

#align-self


Cela permet d’annuler l’alignement par défaut (ou celui spécifié par align-items ) pour les éléments flexibles individuels.

Consultez l’explication align-items pour comprendre les valeurs disponibles.

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Notez que float , clear et alignement vertical n’ont aucun effet sur un élément flexible.

Nous sommes là et heureux de vous aider!

Email

Nous vous répondrons dans les plus brefs délais.

ENVOYER UN EMAIL

Discussion en temps réel

Parlez en ligne avec notre support client incroyable.

DISCUTER MAINTENANT

Appel

Du lundi au vendredi de 8h à 20h IST.

+91 9555960648

Vidéos de soutien

Regardez notre vidéo en ligne et commencez rapidement.

REGARDE MAINTENANT

Avoir une question? Notre équipe est là pour vous aider