Le guide complet de CSS Flexbox - Cours CSS Flexbox

Notre guide complet sur CSS flexbox. Flexbox est une compétence indispensable pour les développeurs Web. Flexbox vous offre tous les outils dont vous avez besoin pour organiser correctement le contenu dans des conteneurs flexibles.

Une fois que vous aurez appris Flexbox, vous vous demanderez comment vous avez réussi à créer des sites Web sans lui. Ce cours vous permet de vous mettre à niveau le plus rapidement possible.

Flexbox vous offre tous les outils dont vous avez besoin pour organiser correctement le contenu dans des conteneurs flexibles. Étant donné que tous les sites Web doivent être flexibles et réactifs de nos jours, Flexbox est une compétence indispensable pour les développeurs Web.

Le cours contient les éléments suivants :

• Votre première mise en page Flexbox
• Axe principal et axe transversal
• Justifier le contenu
• Éléments de positionnement
• La propriété flexible
• Aligner les éléments
• Colonne de direction flexible
• Emballage
• Flex grandir, rétrécir
• Commande
• Création d'une barre de navigation réactive
• Création d'une grille d'images Flexbox

---

Arrière-plan

Le Flexbox Layoutmodule (Flexible Box) vise à fournir un moyen plus efficace de disposer, d'aligner et de répartir l'espace entre les éléments d'un conteneur, même lorsque leur taille est inconnue et/ou dynamique (d'où le mot "flex").

L'idée principale derrière la disposition flexible est de donner au conteneur la possibilité de modifier la largeur/hauteur (et l'ordre) de ses éléments pour remplir au mieux l'espace disponible (principalement pour s'adapter à tous les types d'appareils d'affichage et de tailles d'écran). Un conteneur flexible agrandit les éléments pour remplir l'espace libre disponible ou les réduit pour éviter tout débordement.

Plus important encore, la disposition de la flexbox est indépendante de la direction par opposition aux dispositions régulières (bloc qui est basé verticalement et en ligne qui est basé horizontalement). Bien que ceux-ci fonctionnent bien pour les pages, ils manquent de flexibilité (sans jeu de mots) pour prendre en charge des applications volumineuses ou complexes (en particulier en ce qui concerne le changement d'orientation, le redimensionnement, l'étirement, le rétrécissement, etc.).

Remarque : la disposition Flexbox est la plus appropriée pour les composants d'une application et les dispositions à petite échelle, tandis que la disposition Grille est destinée aux dispositions à plus grande échelle.

Notions de base et terminologie

Étant donné que flexbox est un module entier et non une propriété unique, cela implique beaucoup de choses, y compris tout son ensemble de propriétés. Certains d'entre eux sont destinés à être positionnés sur le conteneur (élément parent, dit « flex container ») alors que d'autres sont destinés à être positionnés sur les enfants (dits « flex items »).

Si la disposition "normale" est basée à la fois sur les directions de flux en bloc et en ligne, la disposition flexible est basée sur les "directions de flux flexibles". Veuillez consulter cette figure de la spécification, expliquant l'idée principale derrière la disposition flexible.

Les éléments seront disposés suivant l'axe main axis(de main-startà main-end) ou l'axe transversal (de cross-startà cross-end).

• axe principal – L'axe principal d'un conteneur flexible est l'axe principal le long duquel les éléments flexibles sont disposés. Attention, il n'est pas forcément horizontal ; cela dépend de la flex-directionpropriété (voir ci-dessous).
• main-start | main-end – Les éléments flexibles sont placés dans le conteneur en commençant par main-start et en allant jusqu'à main-end.
• taille principale – La largeur ou la hauteur d'un élément flexible, selon la dimension principale, correspond à la taille principale de l'élément. La propriété de taille principale de l'élément flexible est la propriété 'width' ou 'height', selon celle qui se trouve dans la dimension principale.
• axe transversal – L'axe perpendiculaire à l'axe principal est appelé axe transversal. Sa direction dépend de la direction de l'axe principal.
• départ croisé | cross-end - Les lignes flexibles sont remplies d'articles et placées dans le conteneur en commençant du côté cross-start du conteneur flexible et en allant vers le côté cross-end.
• taille croisée - La largeur ou la hauteur d'un élément flexible, selon celle qui se trouve dans la dimension croisée, est la taille croisée de l'élément. La propriété de taille de croix est celle de la "largeur" ​​ou de la "hauteur" qui se trouve dans la dimension de la croix.

Propriétés pour le parent

(conteneur souple)

afficher

Cela définit un conteneur flexible ; inline ou block selon 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 dans laquelle les éléments flexibles sont placés dans le conteneur flexible. Flexbox est (mis à part l'emballage facultatif) un concept de mise en page à sens unique. Considérez les éléments flexibles comme étant principalement disposés en rangées horizontales ou en colonnes verticales.

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

• row(par défaut) : de gauche à droite dans ltr; de droite à gauche dansrtl
• row-reverse: de droite à gauche dans ltr; de gauche à droite dansrtl
• column: identique rowmais de haut en bas
• column-reverse: identique row-reversemais de bas en haut

flex-wrap

Par défaut, les éléments flexibles essaieront tous de tenir sur une seule ligne. Vous pouvez changer cela et autoriser les éléments à s'enrouler selon les besoins avec cette propriété.

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap(par défaut) : tous les éléments flexibles seront sur une seule ligne
• wrap : les éléments flexibles s'enrouleront sur plusieurs lignes, de haut en bas.
• wrap-reverse : les éléments flexibles s'enrouleront sur plusieurs lignes de bas en haut.

flux flexible

Il s'agit d'un raccourci pour les propriétés flex-directionet flex-wrap, qui définissent ensemble les axes principal et transversal du conteneur flexible. La valeur par défaut est row nowrap.

.container {
  flex-flow: column wrap;
}

justifier-contenu

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

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

• flex-start(par défaut) : les éléments sont regroupés vers le début de la direction flexible.
• flex-end: les éléments sont emballés vers la fin de la direction flexible.
• start: les éléments sont regroupés vers le début de la writing-modedirection.
• end: les éléments sont emballés vers la fin de la writing-modedirection.
• left: les éléments sont emballés vers le bord gauche du conteneur, sauf si cela n'a pas de sens avec le flex-direction, alors il se comporte comme start.
• right: les éléments sont regroupés vers le bord droit du conteneur, sauf si cela n'a pas de sens avec le flex-direction, alors il se comporte comme start.
• center: les éléments sont centrés le long de la ligne
• space-between: les articles sont répartis uniformément dans la ligne ; le premier élément est sur la ligne de départ, le dernier élément sur la ligne de fin
• space-around: les éléments sont répartis uniformément sur 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.
• space-evenly: les éléments sont distribués de sorte que l'espacement entre deux éléments (et l'espace aux bords) soit égal.

Notez que la prise en charge de ces valeurs par le navigateur est nuancée. Par exemple, space-betweencertaines versions d'Edge n'ont jamais été prises en charge, et début/fin/gauche/droite ne sont pas encore dans Chrome. MDN a des graphiques détaillés . Les valeurs les plus sûres sont flex-start, flex-endet center.

Il existe également deux mots clés supplémentaires que vous pouvez associer à ces valeurs : safeet unsafe. L'utilisation safegarantit que, quelle que soit la manière dont vous effectuez ce type de positionnement, vous ne pouvez pas pousser un élément de sorte qu'il s'affiche hors écran (par exemple, en haut) de manière à ce que le contenu ne puisse pas également défiler (appelé "perte de données") .

aligner les éléments

Cela définit le comportement par défaut de la disposition des éléments flexibles le long de l' axe transversal sur la ligne actuelle. Considérez-le comme la justify-contentversion pour l'axe transversal (perpendiculaire à l'axe principal).

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

• stretch(par défaut) : étirer pour remplir le conteneur (respectez toujours min-width/max-width)
• flex-start/ start/ self-start: les éléments sont placés au début de l'axe transversal. La différence entre ceux-ci est subtile et concerne le respect des flex-directionrègles ou des writing-moderègles.
• flex-end/ end/ self-end: les éléments sont placés à la fin de l'axe transversal. La différence est encore une fois subtile et concerne le respect flex-directiondes règles par rapport aux writing-moderègles.
• center: les éléments sont centrés sur l'axe transversal
• baseline: les éléments sont alignés tels que leurs lignes de base s'alignent

Les mots-clés safeet unsafemodificateurs peuvent être utilisés conjointement avec tous les autres mots-clés (bien que notez la prise en charge du navigateur ) et vous aident à empêcher l'alignement des éléments de sorte que le contenu devienne inaccessible.

aligner le contenu

Cela aligne les lignes d'un conteneur flexible lorsqu'il y a de l'espace supplémentaire dans l'axe transversal, de la même manière que justify-contentles éléments individuels sont alignés dans l'axe principal.

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

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

• flex-start/ start: éléments emballés au début du conteneur. Le (plus soutenu) flex-starthonore le flex-directiontandis startqu'honore la writing-modedirection.
• flex-end/ end: articles emballés jusqu'au bout du conteneur. Le (plus de soutien) flex-endhonore le flex-directiontandis que la fin honore la writing-modedirection.
• center: éléments centrés dans le conteneur
• space-between: éléments uniformément répartis ; la première ligne est au début du conteneur tandis que la dernière est à la fin
• space-around: éléments répartis uniformément avec un espace égal autour de chaque ligne
• space-evenly: les éléments sont répartis uniformément avec un espace égal autour d'eux
• stretch(par défaut) : les lignes s'étirent pour occuper l'espace restant

Les mots-clés safeet unsafemodificateurs peuvent être utilisés conjointement avec tous les autres mots-clés (bien que notez la prise en charge du navigateur ) et vous aident à empêcher l'alignement des éléments de sorte que le contenu devienne inaccessible.

Propriétés pour les enfants

(articles flexibles)

commande

Par défaut, les éléments flexibles sont disposés dans l'ordre source. Cependant, la orderpropriété contrôle l'ordre dans lequel ils apparaissent dans le conteneur flex.

.item {
  order: 5; /* default is 0 */
}

flex-croissance

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 à l'intérieur du conteneur flexible que l'article doit occuper.

Si tous les éléments sont flex-growdéfinis sur 1, l'espace restant dans le conteneur sera distribué également à tous les enfants. Si l'un des enfants a une valeur de 2, l'espace restant occuperait deux fois plus d'espace que les autres (ou il essaiera, du moins).

.item {
  flex-grow: 4; /* default 0 */
}

Les nombres négatifs ne sont pas valides.

flex-rétractable

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

.item {
  flex-shrink: 3; /* default 1 */
}

Les nombres négatifs ne sont pas valides.

flex-basis

Cela définit la taille par défaut d'un élément avant que l'espace restant ne soit distribué. Il peut s'agir d'une longueur (par exemple 20%, 5rem, etc.) ou d'un mot-clé. Le automot-clé signifie "regardez ma propriété largeur ou hauteur" (ce qui était temporairement fait par le main-sizemot-clé jusqu'à ce qu'il soit obsolète). Le contentmot-clé signifie "dimensionnez-le en fonction du contenu de l'élément" - ce mot-clé n'est pas encore bien pris en charge, il est donc difficile à tester et plus difficile de savoir ce que font ses frères , max-contentet min-content.fit-content

.item {
  flex-basis:  | 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 sa flex-growvaleur.

fléchir

C'est le raccourci pour flex-grow, flex-shrinket flex-basiscombiné. Les deuxième et troisième paramètres ( flex-shrinket flex-basis) sont facultatifs. La valeur par défaut est 0 1 auto, mais si vous la définissez avec une seule valeur numérique, c'est comme 1 0.

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

Il est recommandé d'utiliser cette propriété abrégée plutôt que de définir les propriétés individuelles. Le raccourci définit intelligemment les autres valeurs.

s'aligner

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

Veuillez consulter l' align-itemsexplication pour comprendre les valeurs disponibles.

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

Notez que float, clearet vertical-alignn'ont aucun effet sur un élément flexible.

Exemples

Commençons par un exemple très très simple, résolvant un problème quasi quotidien : le centrage parfait. Cela ne pourrait pas être plus simple si vous utilisez flexbox.

.parent {
  display: flex;
  height: 300px; /* Or whatever */
}

.child {
  width: 100px;  /* Or whatever */
  height: 100px; /* Or whatever */
  margin: auto;  /* Magic! */
}

Cela repose sur le fait qu'une marge définie autodans un conteneur flexible absorbe de l'espace supplémentaire. Ainsi, définir une marge verticale de autorendra l'élément parfaitement centré sur les deux axes.

Utilisons maintenant quelques propriétés supplémentaires. Considérez une liste de 6 éléments, tous avec des dimensions fixes, mais qui peuvent être dimensionnés automatiquement. Nous voulons qu'ils soient uniformément répartis sur l'axe horizontal afin que lorsque nous redimensionnons le navigateur, tout s'adapte bien et sans requêtes multimédias.

.flex-container {
  /* We first create a flex layout context */
  display: flex;

  /* Then we define the flow direction 
     and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;

  /* Then we define how is distributed the remaining space */
  justify-content: space-around;
}

Fait. Tout le reste n'est qu'un souci de style. Vous trouverez ci-dessous un stylo présentant cet exemple. Assurez-vous d'aller sur CodePen et essayez de redimensionner vos fenêtres pour voir ce qui se passe.

CodePen Embed Fallback

Essayons autre chose. Imaginez que nous ayons un élément de navigation aligné à droite tout en haut de notre site Web, mais nous voulons qu'il soit centré sur les écrans de taille moyenne et sur une seule colonne sur les petits appareils. Assez facile.

/* Large */
.navigation {
  display: flex;
  flex-flow: row wrap;
  /* This aligns items to the end line on main-axis */
  justify-content: flex-end;
}

/* Medium screens */
@media all and (max-width: 800px) {
  .navigation {
    /* When on medium sized screens, we center it by evenly distributing empty space around items */
    justify-content: space-around;
  }
}

/* Small screens */
@media all and (max-width: 500px) {
  .navigation {
    /* On small screens, we are no longer using row direction but column */
    flex-direction: column;
  }
}

CodePen Embed Fallback

Essayons quelque chose d'encore mieux en jouant avec la flexibilité des éléments flexibles ! Qu'en est-il d'une mise en page mobile à 3 colonnes avec en-tête et pied de page pleine largeur. Et indépendant de la commande source.

.wrapper {
  display: flex;
  flex-flow: row wrap;
}

/* We tell all items to be 100% width, via flex-basis */
.wrapper > * {
  flex: 1 100%;
}

/* We rely on source order for mobile-first approach
 * in this case:
 * 1\. header
 * 2\. article
 * 3\. aside 1
 * 4\. aside 2
 * 5\. footer
 */

/* Medium screens */
@media all and (min-width: 600px) {
  /* We tell both sidebars to share a row */
  .aside { flex: 1 auto; }
}

/* Large screens */
@media all and (min-width: 800px) {
  /* We invert order of first sidebar and main
   * And tell the main element to take twice as much width as the other two sidebars 
   */
  .main { flex: 2 0px; }
  .aside-1 { order: 1; }
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}

CodePen Embed Fallback

Préfixer Flexbox

Flexbox nécessite un préfixe de fournisseur pour prendre en charge le plus de navigateurs possible. Il n'inclut pas seulement les propriétés préfixées avec le préfixe du fournisseur, mais il existe en fait des noms de propriété et de valeur entièrement différents. En effet, la spécification Flexbox a changé au fil du temps, créant une «ancienne», une «tweener» et une «nouvelle» versions.

La meilleure façon de gérer cela est peut-être d'écrire dans la nouvelle syntaxe (et finale) et d'exécuter votre CSS via Autoprefixer, qui gère très bien les solutions de secours.

Alternativement, voici un Sass @mixinpour vous aider avec certains des préfixes, qui vous donne également une idée du genre de choses à faire :

@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;
}

@mixin order($val) {
  -webkit-box-ordinal-group: $val;  
  -moz-box-ordinal-group: $val;     
  -ms-flex-order: $val;     
  -webkit-order: $val;  
  order: $val;
}

.wrapper {
  @include flexbox();
}

.item {
  @include flex(1 200px);
  @include order(2);
}

#css

What is GEEK

Buddha Community

CSS Flexbox: What I learned from Flexbox Zombies

I started playing an educational game called Flexbox Zombies, which has been teaching me the fundamentals of flexbox in a fun way. In the game, you fight zombies by using features of flexbox to aim your crossbow at the zombies.

MDN docs explain flexbox as:

a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces.

The Flexbox Zombies game teaches flexbox through a story, with each lesson building on the previous, thus reinforcing the fundamentals of flexbox in a fun and effective way.

#flexbox #css #css flexbox #flexbox zombies

Le guide complet de CSS Flexbox - Cours CSS Flexbox

Notre guide complet sur CSS flexbox. Flexbox est une compétence indispensable pour les développeurs Web. Flexbox vous offre tous les outils dont vous avez besoin pour organiser correctement le contenu dans des conteneurs flexibles.

Une fois que vous aurez appris Flexbox, vous vous demanderez comment vous avez réussi à créer des sites Web sans lui. Ce cours vous permet de vous mettre à niveau le plus rapidement possible.

Flexbox vous offre tous les outils dont vous avez besoin pour organiser correctement le contenu dans des conteneurs flexibles. Étant donné que tous les sites Web doivent être flexibles et réactifs de nos jours, Flexbox est une compétence indispensable pour les développeurs Web.

Le cours contient les éléments suivants :

• Votre première mise en page Flexbox
• Axe principal et axe transversal
• Justifier le contenu
• Éléments de positionnement
• La propriété flexible
• Aligner les éléments
• Colonne de direction flexible
• Emballage
• Flex grandir, rétrécir
• Commande
• Création d'une barre de navigation réactive
• Création d'une grille d'images Flexbox

---

Arrière-plan

Le Flexbox Layoutmodule (Flexible Box) vise à fournir un moyen plus efficace de disposer, d'aligner et de répartir l'espace entre les éléments d'un conteneur, même lorsque leur taille est inconnue et/ou dynamique (d'où le mot "flex").

L'idée principale derrière la disposition flexible est de donner au conteneur la possibilité de modifier la largeur/hauteur (et l'ordre) de ses éléments pour remplir au mieux l'espace disponible (principalement pour s'adapter à tous les types d'appareils d'affichage et de tailles d'écran). Un conteneur flexible agrandit les éléments pour remplir l'espace libre disponible ou les réduit pour éviter tout débordement.

Plus important encore, la disposition de la flexbox est indépendante de la direction par opposition aux dispositions régulières (bloc qui est basé verticalement et en ligne qui est basé horizontalement). Bien que ceux-ci fonctionnent bien pour les pages, ils manquent de flexibilité (sans jeu de mots) pour prendre en charge des applications volumineuses ou complexes (en particulier en ce qui concerne le changement d'orientation, le redimensionnement, l'étirement, le rétrécissement, etc.).

Remarque : la disposition Flexbox est la plus appropriée pour les composants d'une application et les dispositions à petite échelle, tandis que la disposition Grille est destinée aux dispositions à plus grande échelle.

Notions de base et terminologie

Étant donné que flexbox est un module entier et non une propriété unique, cela implique beaucoup de choses, y compris tout son ensemble de propriétés. Certains d'entre eux sont destinés à être positionnés sur le conteneur (élément parent, dit « flex container ») alors que d'autres sont destinés à être positionnés sur les enfants (dits « flex items »).

Si la disposition "normale" est basée à la fois sur les directions de flux en bloc et en ligne, la disposition flexible est basée sur les "directions de flux flexibles". Veuillez consulter cette figure de la spécification, expliquant l'idée principale derrière la disposition flexible.

Les éléments seront disposés suivant l'axe main axis(de main-startà main-end) ou l'axe transversal (de cross-startà cross-end).

• axe principal – L'axe principal d'un conteneur flexible est l'axe principal le long duquel les éléments flexibles sont disposés. Attention, il n'est pas forcément horizontal ; cela dépend de la flex-directionpropriété (voir ci-dessous).
• main-start | main-end – Les éléments flexibles sont placés dans le conteneur en commençant par main-start et en allant jusqu'à main-end.
• taille principale – La largeur ou la hauteur d'un élément flexible, selon la dimension principale, correspond à la taille principale de l'élément. La propriété de taille principale de l'élément flexible est la propriété 'width' ou 'height', selon celle qui se trouve dans la dimension principale.
• axe transversal – L'axe perpendiculaire à l'axe principal est appelé axe transversal. Sa direction dépend de la direction de l'axe principal.
• départ croisé | cross-end - Les lignes flexibles sont remplies d'articles et placées dans le conteneur en commençant du côté cross-start du conteneur flexible et en allant vers le côté cross-end.
• taille croisée - La largeur ou la hauteur d'un élément flexible, selon celle qui se trouve dans la dimension croisée, est la taille croisée de l'élément. La propriété de taille de croix est celle de la "largeur" ​​ou de la "hauteur" qui se trouve dans la dimension de la croix.

Propriétés pour le parent

(conteneur souple)

afficher

Cela définit un conteneur flexible ; inline ou block selon 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 dans laquelle les éléments flexibles sont placés dans le conteneur flexible. Flexbox est (mis à part l'emballage facultatif) un concept de mise en page à sens unique. Considérez les éléments flexibles comme étant principalement disposés en rangées horizontales ou en colonnes verticales.

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

• row(par défaut) : de gauche à droite dans ltr; de droite à gauche dansrtl
• row-reverse: de droite à gauche dans ltr; de gauche à droite dansrtl
• column: identique rowmais de haut en bas
• column-reverse: identique row-reversemais de bas en haut

flex-wrap

Par défaut, les éléments flexibles essaieront tous de tenir sur une seule ligne. Vous pouvez changer cela et autoriser les éléments à s'enrouler selon les besoins avec cette propriété.

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap(par défaut) : tous les éléments flexibles seront sur une seule ligne
• wrap : les éléments flexibles s'enrouleront sur plusieurs lignes, de haut en bas.
• wrap-reverse : les éléments flexibles s'enrouleront sur plusieurs lignes de bas en haut.

flux flexible

Il s'agit d'un raccourci pour les propriétés flex-directionet flex-wrap, qui définissent ensemble les axes principal et transversal du conteneur flexible. La valeur par défaut est row nowrap.

.container {
  flex-flow: column wrap;
}

justifier-contenu

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

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

• flex-start(par défaut) : les éléments sont regroupés vers le début de la direction flexible.
• flex-end: les éléments sont emballés vers la fin de la direction flexible.
• start: les éléments sont regroupés vers le début de la writing-modedirection.
• end: les éléments sont emballés vers la fin de la writing-modedirection.
• left: les éléments sont emballés vers le bord gauche du conteneur, sauf si cela n'a pas de sens avec le flex-direction, alors il se comporte comme start.
• right: les éléments sont regroupés vers le bord droit du conteneur, sauf si cela n'a pas de sens avec le flex-direction, alors il se comporte comme start.
• center: les éléments sont centrés le long de la ligne
• space-between: les articles sont répartis uniformément dans la ligne ; le premier élément est sur la ligne de départ, le dernier élément sur la ligne de fin
• space-around: les éléments sont répartis uniformément sur 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.
• space-evenly: les éléments sont distribués de sorte que l'espacement entre deux éléments (et l'espace aux bords) soit égal.

Notez que la prise en charge de ces valeurs par le navigateur est nuancée. Par exemple, space-betweencertaines versions d'Edge n'ont jamais été prises en charge, et début/fin/gauche/droite ne sont pas encore dans Chrome. MDN a des graphiques détaillés . Les valeurs les plus sûres sont flex-start, flex-endet center.

Il existe également deux mots clés supplémentaires que vous pouvez associer à ces valeurs : safeet unsafe. L'utilisation safegarantit que, quelle que soit la manière dont vous effectuez ce type de positionnement, vous ne pouvez pas pousser un élément de sorte qu'il s'affiche hors écran (par exemple, en haut) de manière à ce que le contenu ne puisse pas également défiler (appelé "perte de données") .

aligner les éléments

Cela définit le comportement par défaut de la disposition des éléments flexibles le long de l' axe transversal sur la ligne actuelle. Considérez-le comme la justify-contentversion pour l'axe transversal (perpendiculaire à l'axe principal).

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

• stretch(par défaut) : étirer pour remplir le conteneur (respectez toujours min-width/max-width)
• flex-start/ start/ self-start: les éléments sont placés au début de l'axe transversal. La différence entre ceux-ci est subtile et concerne le respect des flex-directionrègles ou des writing-moderègles.
• flex-end/ end/ self-end: les éléments sont placés à la fin de l'axe transversal. La différence est encore une fois subtile et concerne le respect flex-directiondes règles par rapport aux writing-moderègles.
• center: les éléments sont centrés sur l'axe transversal
• baseline: les éléments sont alignés tels que leurs lignes de base s'alignent

Les mots-clés safeet unsafemodificateurs peuvent être utilisés conjointement avec tous les autres mots-clés (bien que notez la prise en charge du navigateur ) et vous aident à empêcher l'alignement des éléments de sorte que le contenu devienne inaccessible.

aligner le contenu

Cela aligne les lignes d'un conteneur flexible lorsqu'il y a de l'espace supplémentaire dans l'axe transversal, de la même manière que justify-contentles éléments individuels sont alignés dans l'axe principal.

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

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

• flex-start/ start: éléments emballés au début du conteneur. Le (plus soutenu) flex-starthonore le flex-directiontandis startqu'honore la writing-modedirection.
• flex-end/ end: articles emballés jusqu'au bout du conteneur. Le (plus de soutien) flex-endhonore le flex-directiontandis que la fin honore la writing-modedirection.
• center: éléments centrés dans le conteneur
• space-between: éléments uniformément répartis ; la première ligne est au début du conteneur tandis que la dernière est à la fin
• space-around: éléments répartis uniformément avec un espace égal autour de chaque ligne
• space-evenly: les éléments sont répartis uniformément avec un espace égal autour d'eux
• stretch(par défaut) : les lignes s'étirent pour occuper l'espace restant

Les mots-clés safeet unsafemodificateurs peuvent être utilisés conjointement avec tous les autres mots-clés (bien que notez la prise en charge du navigateur ) et vous aident à empêcher l'alignement des éléments de sorte que le contenu devienne inaccessible.

Propriétés pour les enfants

(articles flexibles)

commande

Par défaut, les éléments flexibles sont disposés dans l'ordre source. Cependant, la orderpropriété contrôle l'ordre dans lequel ils apparaissent dans le conteneur flex.

.item {
  order: 5; /* default is 0 */
}

flex-croissance

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 à l'intérieur du conteneur flexible que l'article doit occuper.

Si tous les éléments sont flex-growdéfinis sur 1, l'espace restant dans le conteneur sera distribué également à tous les enfants. Si l'un des enfants a une valeur de 2, l'espace restant occuperait deux fois plus d'espace que les autres (ou il essaiera, du moins).

.item {
  flex-grow: 4; /* default 0 */
}

Les nombres négatifs ne sont pas valides.

flex-rétractable

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

.item {
  flex-shrink: 3; /* default 1 */
}

Les nombres négatifs ne sont pas valides.

flex-basis

Cela définit la taille par défaut d'un élément avant que l'espace restant ne soit distribué. Il peut s'agir d'une longueur (par exemple 20%, 5rem, etc.) ou d'un mot-clé. Le automot-clé signifie "regardez ma propriété largeur ou hauteur" (ce qui était temporairement fait par le main-sizemot-clé jusqu'à ce qu'il soit obsolète). Le contentmot-clé signifie "dimensionnez-le en fonction du contenu de l'élément" - ce mot-clé n'est pas encore bien pris en charge, il est donc difficile à tester et plus difficile de savoir ce que font ses frères , max-contentet min-content.fit-content

.item {
  flex-basis:  | 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 sa flex-growvaleur.

fléchir

C'est le raccourci pour flex-grow, flex-shrinket flex-basiscombiné. Les deuxième et troisième paramètres ( flex-shrinket flex-basis) sont facultatifs. La valeur par défaut est 0 1 auto, mais si vous la définissez avec une seule valeur numérique, c'est comme 1 0.

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

Il est recommandé d'utiliser cette propriété abrégée plutôt que de définir les propriétés individuelles. Le raccourci définit intelligemment les autres valeurs.

s'aligner

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

Veuillez consulter l' align-itemsexplication pour comprendre les valeurs disponibles.

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

Notez que float, clearet vertical-alignn'ont aucun effet sur un élément flexible.

Exemples

Commençons par un exemple très très simple, résolvant un problème quasi quotidien : le centrage parfait. Cela ne pourrait pas être plus simple si vous utilisez flexbox.

.parent {
  display: flex;
  height: 300px; /* Or whatever */
}

.child {
  width: 100px;  /* Or whatever */
  height: 100px; /* Or whatever */
  margin: auto;  /* Magic! */
}

Cela repose sur le fait qu'une marge définie autodans un conteneur flexible absorbe de l'espace supplémentaire. Ainsi, définir une marge verticale de autorendra l'élément parfaitement centré sur les deux axes.

Utilisons maintenant quelques propriétés supplémentaires. Considérez une liste de 6 éléments, tous avec des dimensions fixes, mais qui peuvent être dimensionnés automatiquement. Nous voulons qu'ils soient uniformément répartis sur l'axe horizontal afin que lorsque nous redimensionnons le navigateur, tout s'adapte bien et sans requêtes multimédias.

.flex-container {
  /* We first create a flex layout context */
  display: flex;

  /* Then we define the flow direction 
     and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;

  /* Then we define how is distributed the remaining space */
  justify-content: space-around;
}

Fait. Tout le reste n'est qu'un souci de style. Vous trouverez ci-dessous un stylo présentant cet exemple. Assurez-vous d'aller sur CodePen et essayez de redimensionner vos fenêtres pour voir ce qui se passe.

CodePen Embed Fallback

Essayons autre chose. Imaginez que nous ayons un élément de navigation aligné à droite tout en haut de notre site Web, mais nous voulons qu'il soit centré sur les écrans de taille moyenne et sur une seule colonne sur les petits appareils. Assez facile.

/* Large */
.navigation {
  display: flex;
  flex-flow: row wrap;
  /* This aligns items to the end line on main-axis */
  justify-content: flex-end;
}

/* Medium screens */
@media all and (max-width: 800px) {
  .navigation {
    /* When on medium sized screens, we center it by evenly distributing empty space around items */
    justify-content: space-around;
  }
}

/* Small screens */
@media all and (max-width: 500px) {
  .navigation {
    /* On small screens, we are no longer using row direction but column */
    flex-direction: column;
  }
}

CodePen Embed Fallback

Essayons quelque chose d'encore mieux en jouant avec la flexibilité des éléments flexibles ! Qu'en est-il d'une mise en page mobile à 3 colonnes avec en-tête et pied de page pleine largeur. Et indépendant de la commande source.

.wrapper {
  display: flex;
  flex-flow: row wrap;
}

/* We tell all items to be 100% width, via flex-basis */
.wrapper > * {
  flex: 1 100%;
}

/* We rely on source order for mobile-first approach
 * in this case:
 * 1\. header
 * 2\. article
 * 3\. aside 1
 * 4\. aside 2
 * 5\. footer
 */

/* Medium screens */
@media all and (min-width: 600px) {
  /* We tell both sidebars to share a row */
  .aside { flex: 1 auto; }
}

/* Large screens */
@media all and (min-width: 800px) {
  /* We invert order of first sidebar and main
   * And tell the main element to take twice as much width as the other two sidebars 
   */
  .main { flex: 2 0px; }
  .aside-1 { order: 1; }
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}

CodePen Embed Fallback

Préfixer Flexbox

Flexbox nécessite un préfixe de fournisseur pour prendre en charge le plus de navigateurs possible. Il n'inclut pas seulement les propriétés préfixées avec le préfixe du fournisseur, mais il existe en fait des noms de propriété et de valeur entièrement différents. En effet, la spécification Flexbox a changé au fil du temps, créant une «ancienne», une «tweener» et une «nouvelle» versions.

La meilleure façon de gérer cela est peut-être d'écrire dans la nouvelle syntaxe (et finale) et d'exécuter votre CSS via Autoprefixer, qui gère très bien les solutions de secours.

Alternativement, voici un Sass @mixinpour vous aider avec certains des préfixes, qui vous donne également une idée du genre de choses à faire :

@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;
}

@mixin order($val) {
  -webkit-box-ordinal-group: $val;  
  -moz-box-ordinal-group: $val;     
  -ms-flex-order: $val;     
  -webkit-order: $val;  
  order: $val;
}

.wrapper {
  @include flexbox();
}

.item {
  @include flex(1 200px);
  @include order(2);
}

#css

CSS Flex Box: A Flexible Way To Layout

Every element of HTML is a rectangular box. Every Box has a defined height and width. This way you can increase or decrease its size. CSS is used to style HTML elements so that they look nice and decorated. CSS treats every element in the view of its box model. So every element has padding, margin, and border too.

You can learn more about CSS BOX Model here.

Box layout means to position a box on the page. So you may like to center an element horizontally or vertically or you may want to move the element to any other position on the page. Laying out your page is the most important task which determines the overall look of the page.

CSS has got many ways to align a box. You could choose floats, position property or you could try aligning it using margin and padding. But it’s not always so easy to align an element as you wish to. Developers have always been having difficulties to center an element horizontally or vertically. If you try using floats, you will see that it requires more work and gives you extra lines of code to position the element. So what’s the way out?

Here comes the modern CSS Flex Box technique. After using Flex Box for the first time you will forget the difficulties you have been facing with your layout. You will make your layout with fewer lines of code and very quickly.

Now after having Flex Box in your hand you don’t need to worry about every single element in your container. What you need is just add one or two lines of code and there you go.

What Are Some Of The Most Popular Uses Of Flex Box?

You can use Flex Box Almost anywhere on your website to align your content, but I found it more useful to apply it on certain parts of my page than others.

1: Navigation bar

The Navigation menu is mostly a horizontal or vertical bar on top or side of the page with links to other parts of the page. You can create a container for it and apply Flex Box to it so that you can move it’s items wherever it’s suitable for your page layout.

2: Footer

Footer of a website mostly includes contact details, logo, and some links to other parts of the site. You can align your footer content with the help of Flex Box too.

3: Horizontal Alignment

You can align your container’s elements on the horizontal line wherever you like and can add space in them.

4: Vertical Alignment

It often requires to position elements vertically, so there is a very easy way to achieve it with Flex Box. You just need to add one line and it’s already done.

4: Re-Ordering Elements

Flex Box has a function that allows you to rearrange the order of your elements in a container. You can change the order of any element you like.

#web-development #technology #css3 #flexbox #css #html-css #learning-css #learn-flexbox-css

CSS Alignment Made Simple

CSS is seen as an impediment in web development for many of us. Most of the time it looks like even when you follow the rules and everything seems clear, it still doesn’t work the way you want it to.

Therefore, the purpose of this article is to make some features of CSS much easier to understand.

The thing I want to address now is the alignment of the elements.

Without further ado, here are some of the most common scenarios one might encounter when it comes to this topic and how they can be approached.

#css-center #css-position #css-flexbox #css-center-image-in-a-div #css

Hire CSS Developer

Want to develop a website or re-design using CSS Development?

We build a website and we implemented CSS successfully if you are planning to Hire CSS Developer from HourlyDeveloper.io, We can fill your Page with creative colors and attractive Designs. We provide services in Web Designing, Website Redesigning and etc.

For more details…!!
Consult with our experts:- https://bit.ly/3hUdppS

#hire css developer #css development company #css development services #css development #css developer #css