CSS Flexbox: faites tous les objets de la même taille sans coupure

J'ai un conteneur Flex-Box qui contient divers articles. Je veux que tous les éléments aient la même largeur, mais je veux aussi éviter d'écrêter.

Ma structure HTML est un peu comme ceci (Compiled with Blade):

<div class="container-tease"> @foreach($users as $user) <section class="tease tease-user"> <img class="avatar" src="{{ $user->avatar }}"> <div class="summary"> <h3 class="name">{{ $user->name }}</h3> <span class="email">{{ $user->email }}</span> </div> </section> @endforeach </div> 

Avec le CSS suivant (compilé avec SASS):

 .container-tease { font-family: 'Source Sans Pro', sans-serif; display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; .tease { margin: 10px; padding: 7px; &.tease-user { display: flex; align-items: center; background-color: #EEE; border: 1px solid #AAA; border-radius: 8px; .avatar { border-radius: 24px; background-color: white; width: 48px; height: 48px; } .summary { margin-left: 10px; margin-right: 5px; .name { margin: 0 0 5px 0; font-size: 20px; line-height: 20px; white-space: nowrap; } .email { margin-left: 2px; font-size: 14px; line-height: 14px; color: #888; } } } } } 

Lorsqu'il est visualisé, il apparaît comme ceci:

Première conception Flex-Box incorrecte

Bien sûr, ce n'est pas ce que je veux.

J'aimerais que ces éléments aient tous la même largeur, comme ceci:

Conception de Flex-Box correcte

Maintenant, j'ai oublié que je ne demande pas une solution à deux colonnes, ni une solution adaptée aux navigateurs. Le facteur décisif pour la largeur ici est les éléments eux-mêmes, et non la largeur du navigateur.

Par exemple, si je supprime les noms / emails longs de l'exemple, il devrait ressembler à ceci:

Entrez la description de l'image ici

J'ai essayé de faire des choses comme flex: 1 0 200px pour chaque élément, mais cela finit par ressembler à ceci:

Entrez la description de l'image ici

La dernière rangée d'éléments ne partage pas la même largeur, et l'écrêtage partiel se produit sur l'élément de Lance.

J'espère avoir clairement ce que je veux exactement. Je ne me préoccupe pas de spécifier une largeur dans le CSS, s'il ne s'agit que d'une largeur minimale .

Voici ce que j'ai sur Code Pen . N'hésitez pas à jouer avec ça.

J'aimerais m'accrocher à une solution CSS, mais j'accepterai une solution JavaScript si elle fait ce que je veux.

Actuellement, ceci n'est pas possible avec Flexbox.

Toutefois, le groupe de travail CSS est conscient de ce problème et souhaite le réparer dans Flexbox Level 2.

Voir les problèmes de spécification et la planification »css-flexbox-2

Résolvez le problème de "les articles sur la dernière ligne devenez trop gros lorsque vous êtes en train de fléchir". Plus généralement, "faire des articles ont une taille fléchée cohérente, indépendamment de la quantité d'espace supplémentaire sur chaque ligne".

  • Solution possible – complétez la dernière ligne avec des "copies fantômes" du dernier élément, faites-les glisser, puis retirez-les.
  • Solution possible: calculez les valeurs minimales de 1 fr et l'espace libre d'alignement sur l'ensemble de la flexbox (au lieu de per-line) et utilisez-la.

L'astuce consiste à ajouter suffisamment d'éléments vides à la fin de la liste pour répartir uniformément l'espace (comme indiqué dans https://stackoverflow.com/a/22018710/526741 ). Toutes les lignes sans contenu (p. Ex., Uniquement des .tease .tease-user vides .tease .tease-user ) seraient effondrées.

flex:1 0 200px garantit que chaque élément mesure au moins 200 pixels de largeur, mais peut croître, s'il y a de la place. Il maintient également toutes les cases de la même largeur.

overflow:hidden est la seule façon de penser maintenant qui empêche une seule boîte de croître lorsque les autres boîtes ne le font pas. Vous pouvez utiliser un emballage de texte intelligent pour vous assurer que tout est encore lisible. Ou supprimez-le et faites face à la rangée occasionnelle avec des boîtes de différentes tailles (uniquement lorsque le contenu est trop long pour la boîte).

 .container-tease { display:flex; flex-wrap:wrap; } .tease-user { flex:1 0 200px; overflow:hidden; outline:1px solid orange; } 
 <div class="container-tease"> <section class="tease tease-user"> <div class="summary"> <h3 class="name">Bill Murray</h3> <span class="email">[email protected]</span> </div> </section> <section class="tease tease-user"> <div class="summary"> <h3 class="name">Lance Armstrong</h3> <span class="email">[email protected]</span> </div> </section> <section class="tease tease-user"> <div class="summary"> <h3 class="name">Jackie Chan</h3> <span class="email">[email protected]</span> </div> </section> <section class="tease tease-user"> <div class="summary"> <h3 class="name">James Bond</h3> <span class="email">[email protected]</span> </div> </section> <section class="tease tease-user"> <div class="summary"> <h3 class="name">Issac Newton</h3> <span class="email">[email protected]</span> </div> </section> <section class="tease tease-user"> <div class="summary"> <h3 class="name">Pope Francis</h3> <span class="email">[email protected]</span> </div> </section> <section class="tease tease-user"> <div class="summary"> <h3 class="name">Issac Newton</h3> <span class="email">[email protected]</span> </div> </section> <section class="tease tease-user"></section> <section class="tease tease-user"></section> <section class="tease tease-user"></section> <section class="tease tease-user"></section> <section class="tease tease-user"></section> </div>