Comment définir une colonne à largeur fixe avec CSS Flexbox


149

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

Je veux que la boîte rouge ne fasse que 25 em de large lorsqu'elle est 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?

Réponses:


335

Vous devez utiliser la propriété flexor flex-basisplutôt que width. En savoir plus sur MDN .

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

La flexpropriété 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 démonstration simple montre comment définir la première colonne sur 50pxune largeur fixe.


Voir le codepen mis à jour en fonction de votre code.


22
Je ne savais pas que je devais passer outre flex-shrink, merci, bonne réponse.
Paul Redmond

Impossible de faire fonctionner flex-base: auto jusqu'à ce que je réalise que la grille de ma bibliothèque de composants (Semantic UI React) avait une règle css non autorisée
Roman Scher

1

Dans le cas où quelqu'un voudrait avoir une flexbox réactive avec des pourcentages (%), il est beaucoup plus facile pour les requêtes multimédias.

flex-basis: 25%;

Ce sera beaucoup plus fluide lors des tests.

// VARIABLES
$screen-xs:                                         480px;
$screen-sm:                                         768px;
$screen-md:                                         992px;
$screen-lg:                                         1200px;
$screen-xl:                                         1400px;
$screen-xxl:                                        1600px;

// QUERIES
@media screen (max-width: $screen-lg) {
    flex-basis: 25%;
}

@media screen (max-width: $screen-md) {
    flex-basis: 33.33%;
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.