Comment puis-je avoir deux colonnes à largeur fixe avec une colonne flexible au centre?


316

J'essaie de mettre en place une disposition flexbox avec trois colonnes où les colonnes gauche et droite ont une largeur fixe, et la colonne centrale fléchit pour remplir l'espace disponible.

Malgré la configuration des dimensions des colonnes, elles semblent toujours rétrécir à mesure que la fenêtre se rétrécit.

Quelqu'un sait comment accomplir cela?

Une autre chose que je devrai faire est de masquer la colonne de droite en fonction de l'interaction de l'utilisateur, auquel cas la colonne de gauche conserverait toujours sa largeur fixe, mais la colonne centrale remplirait le reste de l'espace.

#container {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    max-width: 1200px;
}

.column.left {
    width: 230px;
}

.column.right {
    width: 230px;
    border-left: 1px solid #eee;
}

.column.center {
    border-left: 1px solid #eee;
}
<div id="container">
    <div class="column left">
        <p>Anxiety was a blog series that ran in the New York Times Opinion section from January 2012 to July 2013. It featured essays, fiction, and art by a wide range of contributors that explored anxiety from scientific, literary, and artistic perspectives.</p>
    </div>
    <div class="column center">
        <img src="http://i.imgur.com/60PVLis.png" width="100" height="100" alt="">
    </div>
    <div class="column right">
        Balint Zsako
        <br/> Someone’s Knocking at My Door
        <br/> 01.12.13
    </div>
</div>

Voici un JSFiddle: http://jsfiddle.net/zDd2g/185/


Réponses:


632

Au lieu d'utiliser width(ce qui est une suggestion lors de l'utilisation de flexbox), vous pouvez utiliser flex: 0 0 230px;ce qui signifie:

  • 0= ne grandit pas (raccourci pour flex-grow)
  • 0= ne pas rétrécir (raccourci pour flex-shrink)
  • 230px= commencer à 230px(raccourci pour flex-basis)

ce qui signifie: toujours l'être 230px.

Voir violon , merci @TylerH

Oh, et vous n'avez pas besoin du justify-contentet align-itemsici.

img {
    max-width: 100%;
}
#container {
    display: flex;
    x-justify-content: space-around;
    x-align-items: stretch;
    max-width: 1200px;
}
.column.left {
    width: 230px;
    flex: 0 0 230px;
}
.column.right {
    width: 230px;
    flex: 0 0 230px;
    border-left: 1px solid #eee;
}
.column.center {
    border-left: 1px solid #eee;
}

14
Dans l'implémentation actuelle (au moins dans Chrome), vous devez également vous assurer que la colonne du milieu a flex-growdéfini (comme par exemple 1). Violon mis à jour .
baseten

2
pourquoi juste la largeur ne fonctionne pas? et j'ai besoin du flex: 0 0 230px ;?
Rodrigo Ruiz

3
flex-grow: 1est toujours nécessaire pour la colonne fluide dans Chrome 53. Sinon, cela ne prendrait pas le reste de la largeur. Je suppose que la réponse devrait tenir compte de ce fait.
thybzi

8
Pour toute personne encore confuse, flex: 0 0 200pxagit de la même manière que width: 200px; flex-shrink: 0.
bryc

3
J'ai copié le violon ici au cas où Rudie l'aurait perdu: jsfiddle.net/133rr51u
TylerH

53

Malgré la configuration des dimensions des colonnes, elles semblent toujours rétrécir à mesure que la fenêtre se rétrécit.

Un réglage initial d'un conteneur flexible est flex-shrink: 1. C'est pourquoi vos colonnes rétrécissent.

Peu importe la largeur que vous spécifiez ( cela pourrait êtrewidth: 10000px ), flex-shrinkla largeur spécifiée peut être ignorée et les éléments flexibles ne peuvent pas déborder du conteneur.

J'essaie de mettre en place une flexbox avec 3 colonnes où les colonnes gauche et droite ont une largeur fixe ...

Vous devrez désactiver la réduction. Voici quelques options:

.left, .right {
     width: 230px;
     flex-shrink: 0;
 }  

OU

.left, .right {
     flex-basis: 230px;
     flex-shrink: 0;
}

OU, comme recommandé par la spécification:

.left, .right {
    flex: 0 0 230px;    /* don't grow, don't shrink, stay fixed at 230px */
}

7.2. Composants de flexibilité

Les auteurs sont encouragés à contrôler la flexibilité en utilisant la flexsténographie plutôt qu'avec ses propriétés de sténographie directement, car la sténographie réinitialise correctement tous les composants non spécifiés pour s'adapter aux utilisations courantes .

Plus de détails ici: Quelles sont les différences entre flex-base et largeur?

Une autre chose que je dois faire est de masquer la colonne de droite en fonction de l'interaction de l'utilisateur, auquel cas la colonne de gauche conserverait toujours sa largeur fixe, mais la colonne centrale remplirait le reste de l'espace.

Essaye ça:

.center { flex: 1; }

Cela permettra à la colonne centrale de consommer l'espace disponible, y compris l'espace de ses frères et sœurs lorsqu'ils sont supprimés.

Violon révisé


Ajouter flex: 1;au centre divétait suffisant, merci.
DIES

5

La compatibilité avec les anciens navigateurs peut être un frein, alors soyez avisé.

Si ce n'est pas un problème, allez-y. Exécutez l'extrait. Accédez à la vue pleine page et redimensionnez. Le centre se redimensionnera sans modifier les divs gauche ou droite.

Modifiez les valeurs gauche et droite pour répondre à vos besoins.

Je vous remercie.

J'espère que cela t'aides.

#container {
  display: flex;
}

.column.left {
  width: 100px;
  flex: 0 0 100px;
}

.column.right {
  width: 100px;
  flex: 0 0 100px;
}

.column.center {
  flex: 1;
  text-align: center;
}

.column.left,
.column.right {
  background: orange;
  text-align: center;
}
<div id="container">
  <div class="column left">this is left</div>
  <div class="column center">this is center</div>
  <div class="column right">this is right</div>
</div>

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.