Comment faire en sorte qu'un élément flexible occupe toute la largeur d'une nouvelle ligne ?

Flex Row pleine largeur pour un article spécifique

Vous souhaitez forcer l'élément "label" à occuper toute la largeur en dessous de deux autres flex- éléments positionnés. Voici comment y parvenir :

Normalement, les éléments flexibles partagent l'espace disponible de manière égale. Cependant, vous souhaitez qu'un élément (l'étiquette) occupe tout l'espace restant sur une nouvelle ligne. Pour ce faire :

1. Définissez la largeur de l'élément sur 100 % : Attribuez à l'élément d'étiquette une largeur de 100 % ou utilisez flex-basis : 100 %. Cela garantit qu'il consomme tout l'espace horizontal restant.
2. Activer l'enveloppement du conteneur : Ajustez le conteneur parent pour activer l'enveloppement (flex-wrap : enveloppement). Cela force les éléments frères à circuler sur de nouvelles lignes lorsque l'espace est épuisé.

Voici le code mis à jour :

.parent {
  display: flex;
  flex-wrap: wrap;
}

.error {
  flex: 0 0 100%;
  border: 1px dashed black;
}

Avec ces ajustements, l'élément label s'étendra sur toute la largeur de la ligne sous les deux autres éléments flexibles, comme vous le souhaitez.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!