web-dev-qa-db-fra.com

Comment définir une colonne de largeur fixe avec CSS flexbox

CodePen: http://codepen.io/anon/pen/RPNpaP .

Je souhaite que la zone rouge ait une largeur de 25 em seulement lorsqu'elle se trouve dans la vue côte à côte - j'essaie d'y parvenir en définissant le CSS dans cette requête multimédia:

@media all and (min-width: 811px) {...}

à:

.flexbox .red {
  width: 25em;
}

Mais quand je fais cela, cela se produit:

http://i.imgur.com/niFBrwt.png

Une idée de ce que je fais mal?

htmlcssflexbox
90
Science

Vous devez utiliser la propriété flex ou flex-basis plutôt que width. En savoir plus sur MDN .

.flexbox .red {
  flex: 0 0 25em;
}

La propriété flex CSS est une propriété abrégée spécifiant la capacité d'un élément flexible à modifier ses dimensions pour occuper l'espace disponible. Il contient:

flex-grow: 0;     /* do not grow   - initial value: 0 */
flex-shrink: 0;   /* do not shrink - initial value: 1 */
flex-basis: 25em; /* width/height  - initial value: auto */

Une simple démonstration montre comment définir la première colonne sur 50px largeur fixe.

.flexbox {
  display: flex;
}
.red {
  background: red;
  flex: 0 0 50px;
}
.green {
  background: green;
  flex: 1;
}
.blue {
  background: blue;
  flex: 1;
}
<div class="flexbox">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

Voir le code mis à jour basé sur votre code.

202
Stickers