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

CodePen: http://codepen.io/anon/pen/RPNpaP . Je veux que la boîte rouge ne soit que de 25 cm de large quand elle est dans la vue côte à côte – J’essaie d’y parvenir en définissant le css dans

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

à

 .flexbox .red { width: 25em; } 

mais quand je fais cela, cela se produit:

http://soffr.miximages.com/html/niFBrwt.png

Une idée de ce que je fais mal? Merci beaucoup.

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 remplir 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 à 50px de largeur fixe.

 .flexbox { display: flex; } .red { background: red; flex: 0 0 50px; } .green { background: green; flex: 1; } .blue { background: blue; flex: 1; } 
 
1
2
3