web-dev-qa-db-fra.com

Ciblage des éléments flexibles sur la dernière ligne ou sur une ligne spécifique

Mon problème est que je veux le flexbox avec une largeur de plage variable, et tout 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 de enfants (la dernière rangée).

#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éé ne situation dynamique dans jsFiddle

Mes divs flex peuvent rétrécir jusqu'à 150px et augmenter jusqu'à 250px, mais tous doivent être de la même taille (et évidemment je veux une solution CSS, avec JS je connais le chemin).

htmlcsscss3flexbox
34
Baro

Malheureusement, dans l'itération actuelle de flexbox (Niveau 1), il n'existe aucun moyen propre de résoudre le problème d'alignement de la dernière ligne. C'est un problème courant.

Il serait utile d'avoir une propriété flex le long des lignes de:

  • last-row
  • last-column
  • only-child-in-a-row
  • alone-in-a-column

Ce problème semble être une priorité élevée pour Flexbox Niveau 2:

Bien que ce comportement soit difficile à réaliser dans flexbox, il est simple et facile dans Disposition de la grille CSS :

Dans le cas où la grille n'est pas une option, voici une liste de questions similaires contenant divers flexbox hacks:

45
Michael_B

Comme solution rapide et sale, on peut utiliser:

.my-flex-child:last-child/*.product:last-child*/ {
  flex-grow: 100;/*Or any number big enough*/
}
2
Boris D. Teoharov

J'ai utilisé cette solution de contournement, même si elle n'est pas très élégante et qu'elle n'utilise pas la puissance de Flexbox.

Elle peut être réalisée aux conditions suivantes:

  • Tous les articles ont la même largeur
  • Les articles ont une largeur fixe
  • Vous utilisez SCSS/SASS (peut être évité cependant)

Si tel est le cas, vous pouvez utiliser l'extrait de code suivant:

 $itemWidth: 400px;
 $itemMargin: 10px;

html, body {
  margin: 0;
  padding: 0;
}

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 auto;
  border: solid 1px blue;
}

@for $i from 1 through 10 {
  @media only screen and (min-width: $i * $itemWidth + 2 * $i * $itemMargin) {
    .flex-container {
      width: $i * $itemWidth + 2 * $i * $itemMargin;
    }
  }
}

.item {
  flex: 0 0 $itemWidth;
  height: 100px;
  margin: $itemMargin;
  background: red;
}

<div class="flex-container">
  <div class="item"></div>
  <div class="item" style="flex: 500 0 200px"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Ici J'ai créé un exemple sur codepen qui implémente également margin.

Les deuxième et troisième conditions peuvent être évitées respectivement en utilisant des variables css (si vous avez décidé de les prendre en charge) et en compilant l'extrait scss ci-dessus.

Eh bien, c'est vrai, on pourrait le faire aussi avant flexbox, mais display: flex peut toujours être essentiel pour une conception réactive.

0
Cristian Traìna