Dimensionierung von flexiblen Artikeln in der letzten Reihe

Mein Problem ist, dass ich die Flexbox mit variabler Bereichsbreite haben möchte, und alles funktioniert gut, aber nicht in der letzten Reihe. Ich möchte die gleiche Dimension für alle Kinder, auch wenn die Reihe nicht voll von Kindern ist (die letzte Reihe).

#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;
}

ich erschuf eine dynamische Situation in jsFiddle

Meine Flex-Divs können bis 150px schrumpfen und bis 250px wachsen, aber alle müssen die gleiche Größe haben (und natürlich will ich eine CSS-Lösung, mit JS kenne ich mich aus).

Leider gibt es in der aktuellen Iteration von Flexbox (Level 1) keine saubere Möglichkeit, das Ausrichtungsproblem der letzten Zeile zu lösen. Es ist ein allgemeines Problem.

Es wäre nützlich, eine Flex-Eigenschaft wie folgt zu haben:

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

Dieses Problem scheint für Flexbox Level 2 eine hohe Priorität zu haben:

• Wiki der CSS-Arbeitsgruppe – Spezifikationsprobleme und Planung
• https://lists.w3.org/Archives/Public/www-style/2015Jan/0150.html

Obwohl dieses Verhalten in Flexbox schwer zu erreichen ist, ist es einfach und leicht in CSS-Grid-Layout:

• Flexartikel mit gleicher Breite auch nach dem Wickeln

Falls Grid keine Option ist, finden Sie hier eine Liste ähnlicher Fragen mit verschiedenen Flexbox-Hacks:

• Korrekte Dimensionierung und Ausrichtung der Flex-Elemente in der letzten Reihe
• Flexbox: Letzte Reihe am Raster ausrichten
• Flexbox Wrap – andere Ausrichtung für die letzte Reihe
• Wie kann ein flexibles Element die gleichen Abmessungen behalten, wenn es in eine neue Reihe gezwungen wird?
• Selektor für ein Element allein in einer Reihe?
• Ausrichten von Elementen in der letzten Flexbox-Reihe
• Wie kann ich zulassen, dass Flex-Elemente wachsen, während sie dieselbe Größe behalten?
• Richten Sie die letzte Zeile der Flexbox mit Abstand zwischen und Rändern linksbündig aus
• Inkonsistenter Rand zwischen Flex-Elementen in der letzten Reihe
• Wie hält man umwickelte Flex-Elemente auf der gleichen Breite wie die Elemente in der vorherigen Reihe?
• So richten Sie die linke letzte Zeile/Zeile in einer mehrzeiligen Flexbox aus
• Die letzten Kinder des Grids bekommen eine riesige Rinne, weil zwischen den Flexboxen Platz ist
• Verwalten von justify-content: space-between in der letzten Zeile
• Flexbox-Abstand zwischen Verhalten kombiniert mit Umbruch
• Ist es möglich, CSS Flexbox zu verwenden, um Elemente in jeder Zeile zu dehnen und dabei konsistente Breiten beizubehalten?
• Verhindern Sie, dass sich der letzte Artikel ausdehnt, um den Behälter zu füllen

Als schnelle und schmutzige Lösung kann man verwenden:

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

Sie könnten hier versuchen, Grid anstelle von Flexbox zu verwenden:

#products-list {

  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(100px, 250px)); //grid automagic
  justify-content: start; //start left

}

Fiddle-Link

Wenn alle Ihre Zeilen die gleiche Anzahl von Elementen haben, können Sie verwenden :nth-last-child. Wenn beispielsweise alle Zeilen 3 Elemente enthalten, können Sie so etwas tun, um den Rand der letzten 3 Elemente zu entfernen:

.container{
  display: flex;
  flex-wrap: wrap;
  background: yellow;
}

.item{
  width: calc((100% - 2*10px)/3);
  height: 50px;
  background: blue;
  color: white;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 5px;
  box-sizing: border-box;
}

/* last item of each row */
.item:nth-child(3n){
  margin-right: 0;
  font-size: 150%;
}

/* last 3 items */
.item:nth-last-child(-n+3){
  margin-bottom: 0;
  background: green;
}

<div class="container">
  <div class="item" >1</div>
  <div class="item" >2</div>
  <div class="item" >3</div>
  <div class="item" >4</div>
  <div class="item" >5</div>
  <div class="item" >6</div>
  <div class="item" >7</div>
</div>

Ein einfacher Trick fügt einen flexiblen Raum hinzu, um den Rest der letzten Reihe zu füllen:

#products-list{
    display:flex;
    flex-flow: row wrap;
    justify-content:space-between;
}
#products-list::after {
    content: "";
    flex: auto;
    flex-basis: 200px;/*your item width*/
    flex-grow: 0;
}

Aber Sie sollten dann keine Ränder für Artikel verwenden. Wickeln Sie sie lieber in Behälter mit Polsterung.

Ich habe diese Problemumgehung verwendet, auch wenn sie nicht sehr elegant ist und nicht die Leistung von Flexbox nutzt.

Es kann unter folgenden Bedingungen durchgeführt werden:

• Alle Artikel haben die gleiche Breite
• Die Artikel haben eine feste Breite
• Sie nutzen SCSS/SASS (kann man aber vermeiden)

Wenn dies der Fall ist, können Sie das folgende Snippet verwenden:

 $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>

Hier Ich habe ein Beispiel auf erstellt Codestift die auch Marge implementiert.

Die zweite und die dritte Bedingung können jeweils vermieden werden, indem Sie CSS-Variablen verwenden (wenn Sie sich entschieden haben, dies zu unterstützen) und das obige scss-Snippet kompilieren.

Stimmt, wir könnten es auch vor Flexbox machen, aber display: flex kann für ein responsives Design dennoch unerlässlich sein.

Es gibt eine großartige Lösung, die immer funktioniert. fügen Sie ein div mit dem Klassenprodukt hinzu (dieselbe Klasse für andere Elemente, die unter Flex sind) und fügen Sie einen Stil für dieses div:height:0px hinzu; Sie müssen so viele Tauchgänge wie möglich in einer Reihe hinzufügen.

<div class="product" style="height:0px">

so viele, wie in einer Reihe sein können. Das ist alles. Funktioniert immer.