Le ciblage flex éléments sur la dernière ligne spécifique ou
Mon problème est que je veux la flexbox avec la variable de la plage de largeur, et tous fonctionne bien, mais pas sur la dernière ligne. Je veux la même dimension pour tous les enfants, même lorsque la ligne n'est pas pleine d'enfants (la dernière ligne).
#products-list {
position:relative;
display: flex;
flex-flow: row wrap;
width:100%;
}
#products-list .product {
min-width:150px;
max-width:250px;
margin:10px 10px 20px 10px;
flex:1;
}
J'ai créé une situation dynamique dans jsFiddle
Mon flex divs peut rétrécir jusqu'à 150px et grandir jusqu'à 250px, mais tous doivent être de la même taille (et, évidemment, je veux un CSS solution, avec JS je connais le chemin).
OriginalL'auteur Baro | 2017-02-11
Vous devez vous connecter pour publier un commentaire.
Malheureusement, dans l'itération en cours de flexbox (Niveau 1), il n'existe pas de moyen propre à résoudre la dernière rangée de problème d'alignement. C'est un problème commun.
Il serait utile d'avoir un flex de la propriété le long des lignes de:
last-row
last-column
only-child-in-a-row
alone-in-a-column
Ce problème ne semble pas être une priorité pour Flexbox Niveau 2:
Bien que ce comportement est difficile à réaliser dans flexbox, c'est simple et facile à Grille CSS de Mise en page:
Dans le cas de la Grille n'est pas une option, voici une liste de questions similaires contenant divers flexbox hacks:
Je ne connais pas de solution rapide à ce problème. En fait, le problème lui-même varie dans la nature. Si vous avez une solution universelle, vous devriez poster une réponse.
Aussi, pour quelqu'un qui a la lecture de cette réponse, uniquement à des fins d'enseignement, je pense que vous avez raison. Quelques-uns, le cas échéant, les gens vont aller à travers l'ensemble de la liste des liens.
Mais pour quelqu'un de visiter cette page qui a désespérément besoin d'une solution, je dirais qu'ils vont aller à travers chaque lien, en espérant trouver une méthode qui fonctionne. Basé sur les upvotes à cette réponse, et celui-ci et celui-ci (voir "Remarque"), je dirais qu'au moins certaines personnes trouvent les références utiles.
Je n'ai pas eu la patience de passer par tous les liens et vérifier si quelqu'un est venu avec un js solution pour elle, alors j'ai fait mon, pour le cas particulier où il n'y a pas déterminé de grille (ou enfant connu largeur). Juste à largeur variable pour les enfants, la dernière ligne doit être aligné à gauche, tandis que les précédentes lignes devrait s'étirer pour remplir pleine taille.
OriginalL'auteur Michael_B
Comme un rapide et sale de la solution, on peut utiliser:
OriginalL'auteur Boris D. Teoharov
J'ai utilisé cette solution, même si elle n'est pas très élégant et il n'utilise pas la puissance de Flexbox.
Il peut être effectué dans les conditions suivantes:
Si c'est le cas, vous pouvez utiliser le code suivant:
Ici J'ai créé un exemple sur codepen qui met également en œuvre de la marge.
La deuxième et la troisième conditions peuvent être évités à l'aide de css variables (si vous avez décidé de fournir un soutien pour elle) et de la compilation ci-dessus scss extrait.
Bien, c'est vrai, nous pourrions le faire aussi avant de flexbox, mais
display: flex
peut être tout de même essentiel pour un responsive design.OriginalL'auteur Cristian Traìna