Les derniers éléments de ligne incomplets CSS flex prennent la largeur des éléments de ligne complets

Je crée une flexbox; un conteneur a une max-width , par exemple, max-width = 500px , et les éléments enfants ont chacun min-width: 130px et flex-grow: 1 pour remplir la totalité de l’espace de la ligne.

Voici le violon: https://jsfiddle.net/7wroxkhj/6/

Ce que je veux réaliser est que les éléments de la dernière ligne prennent la même largeur que les éléments précédents. c’est-à-dire: les articles 7 et 8 doivent avoir la même largeur d’éléments de 1 à 6.

Comment puis-je y arriver?

METTRE À JOUR:

Les solutions JS sont les bienvenues!

Vous voudrez peut-être envisager quelque chose comme les éléments flexibles invisibles à la fin de la liste.

HTML

 
1
2
3
4
5
6
7
8
/* new */ /* new */

CSS

 .hidden { visibility: hidden; height: 0; font-size: 0; margin: 0 10px; } 

DEMO

Atsortingbuez au pseudo-élément supérieur les mêmes propriétés que vous lui atsortingbuez, mais une hauteur très basse.

Mais si plus de 2 pseudo-éléments sont nécessaires, vous avez besoin d’une autre technique.

 .parent { background: red; max-width: 500px; height: 400px; display: flex; flex-wrap: wrap; } .parent::after { content: ''; flex: 130px 1; margin: 10px; background-color: yellow; height: 10px; } .child { background: blue; margin: 10px; flex: 130px 1; color: #FFFFFF; text-align: center; line-height: 50px; font-size: 60px; } 
 
1
2
3
4
5
6
7
8

METTRE À JOUR

Ok, j’ai enfin compris pourquoi les OP voyaient tout si différemment de moi. J’utilisais Chrome et OP utilisait Firefox. Ce qui suit est la dernière démo qui devrait être compatible avec Chrome et Firefox.

  • Les principales modifications incluent l’emballage complet de la mise en page dans un conteneur à colonnes flexibles.
  • Suppression des margins: 10px; Parce que flexbox avec la taille de la box-sizing ne gère pas les marges ou les bordures comme prévu.
  • Utilisé une pléthore de propriétés de hauteur et de largeur min et max.
  • Utilisé justify-content: space-between et align-items: space-between les directions de colonne et de ligne qui fait une grid serrée mais flexible.

https://jsfiddle.net/zer00ne/fkczpggy/

 .case { background: red; display: flex; flex-flow: column wrap; justify-content: space-between; align-items: space-around; margin: auto 0; max-width: 500px; overflow-y: auto; } .parent { background: red; height: 99vh; min-height: 100%; max-width: 500px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: space-between; flex: 0 1 auto; overflow-y: auto; } .child { background: blue; min-width: 130px; min-height: 130px; border: 1% solid transparent; color: #FFFFFF; height: auto; text-align: center; font-size: 60px; flex: 1 0 10%; margin: 1%; } .child:last-of-type { visibility: hidden; } 
  
1
2
3
4
5
6
7
8
9