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

J’essaie de configurer une disposition en 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 pour les colonnes, elles semblent toujours diminuer à mesure que la fenêtre se rétrécit.

Quelqu’un sait comment accomplir cela?

Une chose supplémentaire à faire est de masquer la colonne de droite en fonction de l’interaction de l’utilisateur, auquel cas la colonne de gauche conservera toujours sa largeur fixe, mais la colonne centrale remplira le rest 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; } 
 

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 consortingbutors that explored anxiety from scientific, literary, and artistic outlook.

Balint Zsako
Someone's Knocking at My Door
01.12.13

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 rétrécit pas (raccourci pour flex-shrink )
  • 230px = commence à 230px (sténographie pour la flex-basis )

ce qui signifie: toujours être 230px .

Voir le violon , merci @TylerH

Oh, et vous n’avez pas besoin du justify-content et align-items ici.

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

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

Peu importe la largeur que vous spécifiez ( il peut s’agir de la width: 10000px ), la 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 un 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, tel que recommandé par la spécification:

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

7.2. Composantes de la flexibilité

Les auteurs sont encouragés à contrôler la flexibilité en utilisant le raccourci de flex plutôt que leurs propriétés à long terme, car le raccourci réinitialise correctement les composants non spécifiés pour les adapter aux utilisations courantes .

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

Une chose supplémentaire 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 conservera toujours sa largeur fixe, mais la colonne centrale remplira le rest de l’espace.

Essaye ça:

 .center { flex: 1; } 

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

Violon révisé

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

Si ce n’est pas un problème, alors allez-y. Exécutez l’extrait de code. Aller à la page complète et redimensionner. Le centre se redimensionnera sans modification des divs de gauche ou de droite.

Modifiez les valeurs de gauche et de 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; } 
 
this is left
this is center
this is right