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

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

Lorsque vous travaillez avec des mises en page flexibles, il est souvent nécessaire de positionner systématiquement les éléments. Dans ce cas, le but est d'aligner les deux premiers éléments enfants sur la même ligne tout en plaçant le troisième élément en dessous en pleine largeur.

Solution utilisant les propriétés Flex

Pour y parvenir, définissez le propriétés suivantes sur les deux premiers éléments :

flex-grow: 1;
flex-shrink: 1;

Cela signifie qu'ils se dilateront et se rétréciront pour remplir également l'espace disponible.

Pour le troisième élément, utilisez le propriétés suivantes :

flex-grow: 0;
flex-shrink: 0;
flex-basis: 100%;

Cela garantit qu'il conserve sa taille d'origine, ne rétrécit pas et occupe toute la largeur du conteneur lorsqu'il y a suffisamment d'espace.

Incorporation d'éléments ajoutés dynamiquement

Étant donné que l'élément label est ajouté par programme, il est crucial d'ajuster le CSS pour l'adapter. En définissant les propriétés suivantes sur l'élément label, celui-ci s'étendra sur toute la largeur sous les deux premiers éléments :

display: block;
width: 100%;

Extrait de code final

Voici un exemple qui intègre ces solutions :

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

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

#range, #text {
  flex: 1;
}

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

Cela devrait forcer l'élément d'étiquette à s'étendre sur 100 % de la largeur en dessous des deux premiers éléments, en conservant la valeur souhaitée. mise en page.

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!