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

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/

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;
}

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é

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>