Comment faire en sorte qu'un élément flexible s'étende sur toute la ligne située sous les autres éléments flexibles ?

Forcer l'élément flexible pleine largeur à s'étendre sur toute la ligne

Problème :

Dans un disposition flexible, le but est de conserver les deux premiers éléments enfants sur une seule ligne, tandis que le troisième élément occupe sa propre ligne pleine largeur ci-dessous. Le défi vient du désir d'utiliser les propriétés flex-grow et flex-shrink pour les deux premiers éléments, tout en garantissant que le troisième élément s'étend sur toute la largeur du conteneur parent et apparaisse en dessous des deux premiers.

Solution :

Pour forcer le troisième élément à s'étendre sur 100 % de la largeur et à apparaître sur une nouvelle ligne en dessous de l'autre deux :

• Set flex-basis : 100 % sur le troisième élément. Cela garantit qu'il occupe tout l'espace disponible dans sa ligne et est poussé vers une nouvelle ligne.
• Implémentez flex-wrap : enveloppez le conteneur parent. Cela permet aux éléments flexibles de s'enrouler sur plusieurs lignes, acceptant ainsi les éléments qui ne peuvent pas tenir dans la largeur de la ligne actuelle.

Exemple de code :

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

#range, #text {
  flex: 1;
}

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

<div class="parent">
  <input type="range">

Avec cette approche, les deux premiers éléments occupent la même ligne, partageant la largeur disponible, tandis que le troisième élément s'étend sur toute la largeur du conteneur parent et est positionné sur une nouvelle ligne. ci-dessous.

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!