web-dev-qa-db-fra.com

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

J'essaie de configurer une mise en page flexbox avec trois colonnes. Les colonnes gauche et droite ont une largeur fixe et la colonne centrale se plie pour remplir l'espace disponible.

Bien que les dimensions des colonnes soient définies, celles-ci semblent toujours se réduire au même titre que la fenêtre.

Quelqu'un sait comment accomplir cela?

Une autre chose à faire est de cacher la colonne de droite en fonction de l’interaction de l’utilisateur. Dans ce cas, la colonne de gauche conserve sa largeur fixe, mais la colonne centrale remplit 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/

htmlcsscss3flexbox
282
mheavers

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

  • 0 = ne croît pas (raccourci pour flex-grow)
  • 0 = ne pas réduire (raccourci pour flex-shrink)
  • 230px = commence à 230px (raccourci pour 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.

575
Rudie

Bien que les dimensions des colonnes soient définies, celles-ci semblent toujours se réduire au même titre que la fenêtre.

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

Peu importe la largeur que vous spécifiez ( il peut s'agir de _width: 10000px_ ), avec _flex-shrink_, la largeur spécifiée peut être ignorée et les éléments flexibles ne doivent pas déborder du conteneur.

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

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

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

OR

_.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. Composantes de la flexibilité

Les auteurs sont encouragés à contrôler la flexibilité en utilisant le raccourci flex plutôt que directement avec ses propriétés de type longhand, car ce raccourci réinitialise correctement tous les composants non spécifiés afin de les adapter à tilisations courantes .

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

Une autre chose que je dois faire est de cacher la colonne de droite en fonction de l’interaction de l’utilisateur. Dans ce cas, la colonne de gauche conserve sa largeur fixe, mais la colonne du centre remplit 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é

47
Michael_B

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

Si ce n'est pas un problème alors allez-y. Exécutez l'extrait de code. Accéder à la page complète et redimensionner. Center se redimensionnera lui-même sans modification des 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>
1
2xSamurai