Comment faire en sorte qu'un élément flexible s'étende sur toute la largeur d'une ligne en dessous d'autres éléments flexibles ?

Éléments flexibles pleine largeur dans la rangée

Vous souhaitez conserver les deux premiers éléments enfants sur une seule ligne tout en positionnant le troisième élément ci-dessous sur toute la largeur, en utilisant le flex pour cela mise en page.

Question :

Comment obliger l'élément « label » à s'étendre sur toute la largeur de la ligne sous les deux premiers éléments positionnés de manière flexible ?

Réponse :

Pour forcer un élément flexible à s'étendre sur une ligne complète, appliquez width : 100 % ou flex-basis : 100 %, et activez l'enroulement sur le conteneur. Les ajustements suivants y parviendront :

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

.error {
  flex: 0 0 100%; /* flex-grow, flex-shrink, flex-basis */
  border: 1px dashed black;
}

Avec ces changements, l'élément "label" occupera toute la largeur en dessous des deux autres éléments, tout en conservant le positionnement flexible souhaité pour les deux premiers éléments enfants.

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!