web-dev-qa-db-fra.com

Comment définir un flex-container sur la largeur de ses flex-items?

J'ai un conteneur flexible avec justify-content: flex-start. Il y a un débordement sur le côté droit car les articles flexibles prennent moins de place que la taille du conteneur.

Outre la définition d'une largeur explicite sur le conteneur flexible, existe-t-il un moyen d'avoir simplement l'équivalent de width: auto pour supprimer le débordement?

csscss3flexbox
48
BOverflow

Si vous voulez dire que vous voulez que le conteneur soit la largeur des articles, plutôt que les articles se développant à la largeur du conteneur ...

Vous pourrez peut-être l'obtenir en modifiant display:flex à display:inline-flex

50
Mahks

Comme suggéré par Mahks, vous pouvez rendre le conteneur flexible en ligne . Mais si la pose en ligne ne convient pas à votre mise en page, une alternative consiste à faire flotter le conteneur flexible (pas les éléments flexibles).

Floats sera rétractable pour s'adapter à leur contenu, et ce n'est pas différent pour un conteneur flexible au niveau du bloc. Un conteneur flexible de niveau en ligne se comporte de la même manière qu'un boîte de bloc en ligne lorsqu'il est disposé dans son contexte de mise en forme en ligne parent, ce qui signifie qu'il se rétrécira également pour s'adapter à son contenu par défaut.

0
BoltClock

  1. width: min-content (CSS3 "intrinsèque" par opposition à "extrinsèque")

  2. display: inline-flex si vous ne vous souciez pas que ce soit en ligne

Si tu utilises width: min-content sur un paragraphe, le mot le plus long détermine la largeur.

.flex-container {
  display: flex;
}

.flex-inline-container {
  display: inline-flex;
}

.width-min-content {
  width: min-content;
}

.row-direction {
  flex-direction: row;
  border: 0.0625rem solid #3cf;
 }
.col-direction {
  flex-direction: column;
  border: 0.0625rem solid Magenta;
}
flex
<div class='flex-container row-direction'>
  <input />
  <input type='datetime-local'>
</div>
<div class='flex-container col-direction'>
  <input />
  <input type='datetime-local'>
</div>
<br>
flex width: min-content
<div class='flex-container width-min-content row-direction'>
  <input />
  <input type='datetime-local'>
</div>
<div class='flex-container width-min-content col-direction'>
  <input />
  <input type='datetime-local'>
</div>
<br>
inline-flex
<div class='flex-inline-container row-direction'>
  <input />
  <input type='datetime-local'>
</div>

<div class='flex-inline-container col-direction'>
  <input />
  <input type='datetime-local'>
</div>
0
neaumusic

pas sûr de votre question, mais:

[~ # ~] démo [~ # ~] : http://jsfiddle.net/jn45P/

il vous suffit d'activer la flexibilité des éléments flexibles à l'aide de flex-grow:1; pour remplir l'espace

<div class="o">
    <div>a</div><div>a</div><div>a</div><div>a</div><div>a</div>
</div>

<div class="o flex">
    <div>a</div><div>a</div><div>a</div><div>a</div><div>a</div>
</div>

div.o
{
    border:2px red solid;
    padding:2px;
    width:500px;
    flex-direction:row;
    display:flex;
    justify-content:flex-start;
}

div.o > div
    {border:2px red solid;margin:2px;}

div.o.flex > div
    {flex:1 1 auto;} /* enable flexibility on the flex-items */
0
user652649