CSS Conserver tous les éléments enfants flexbox de la même taille

Mon sass (à l'aide de la boussole afin d'obtenir les préfixes) est montré dans ce violon
:

.container
   @include display-flex
   @include flex-wrap(wrap)
   .item
       @include flex-grow(1)
       @include flex-basis(190px)

CSS Conserver tous les éléments enfants flexbox de la même taille

Bien, je voudrais que les deux éléments à travers le bas pour avoir la même chose avec les objets sur le dessus.

Je ne veux pas les faire flotter à gauche et à fixer leur largeur, cela ne fonctionnera pas pour mon arrangement dans d'autres résolutions.

Toutes les suggestions sont les bienvenues!

source d'informationauteur TaylorMac | 2014-08-26

  1. 25

    Vous avez 2 façons de le faire:

    flex-grow: 0 (violon)

    Si vous définissez flex-grow à 0, vous indiquez les éléments à conserver leur largeur et d'élargir l'espace vide. À l'aide de flex-grow: 1 les éléments permettra d'élargir la largeur pour s'adapter à l'espace.

    éléments invisibles (violon)

    Ajouter certains éléments invisibles après les éléments normales avec les mêmes propriétés flex. Vous recevrez un aligné à gauche look.

    Dans cette solution, il y aura le même nombre d'éléments dans toutes les lignes visibles alors assurez-vous d'ajouter suffisamment d'éléments invisibles pour fonctionner correctement sur les écrans de grande taille.

  2. 2

    Vous pouvez obtenir les éléments pour arrêter l'expansion avec max-width sur les éléments (violon). Pour les obtenir, pour aligner à gauche, utilisez une autre justify-content sur l'emballage (violon).

    Espère que cela fonctionne! Ont seulement été regardant cela en Chrome.