web-dev-qa-db-fra.com

Forcer l'élément flexible à couvrir toute la largeur de la ligne

J'essaie de conserver les 2 premiers éléments enfants sur la même ligne, tandis que le troisième élément est tout à fait en dessous, sur toute la largeur, tout en utilisant flex.

Je suis particulièrement intéressé par l'utilisation des propriétés flex-grow et flex-shrink sur les 2 premiers éléments (ce qui est l'une de mes raisons pour ne pas utiliser les pourcentages). Toutefois, le troisième élément doit être réellement de largeur et inférieur au premier. deux.

L'élément label est ajouté par programme après l'élément text lorsqu'il y a une erreur et que je ne peux pas modifier le code.

Comment forcer l'élément étiquette à s'étendre sur une largeur de 100% sous les deux autres éléments positionnés à l'aide de flex?

.parent {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: #ececec;
}

.parent * {
  width: 100%;
}

.parent #text {
  min-width: 75px;
  flex-shrink: 2.25;
}
<div class="parent">
  <input type="range" id="range">
  <input type="text" id="text">
  <label class="error">Error message</label>
</div>
htmlcsscss3flexbox
35
MPaul

Lorsque vous souhaitez qu'un élément flexible occupe une ligne entière, définissez-le sur width: 100%/flex-basis: 100% et activez wrap sur le conteneur.

L'élément consomme maintenant tout l'espace disponible. Les frères et sœurs sont forcés de passer à d'autres rangées.

.parent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background-color: #ececec;
}

.error {
  flex: 0 0 100%; /* fg: 0, fs: 0, fb: 100% */
  border: 1px dashed red;
}

#range, #text {
  flex: 1;
}
<div class="parent">
  <input type="range" id="range">
  <input type="text" id="text">
  <label class="error">Error message</label>
</div>
56
Michael_B

Vous semblez rechercher min-width sur l'enfant et flex-wrap:wrap sur le parent:

.parent {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
}

.parent > * {
  flex-grow: 1;
}

.parent > .error {
  min-width: 100%;
  background-color: rgba(255,0,0,.3);
}
<div class="parent">
  <input type="range" id="range">
  <input type="text" id="text">
  <label class="error">Error message</label>
</div>
4
Andrei Gheorghiu