Flexbox: Letzte Reihe am Gitter ausrichten

Eine Technik wäre das Einfügen einer Anzahl zusätzlicher Elemente (bis zu der maximalen Anzahl von Elementen, die Sie jemals in einer Reihe erwarten lassen), die eine Höhe von Null haben. Der Raum ist immer noch geteilt, aber überflüssige Zeilen fallen zu nichts zusammen:

http://codepen.io/dalgard/pen/Dbnus

body {
  padding: 5%;
}

div {
  overflow: hidden;
  background-color: yellow;
}

ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -4px -4px 0;
  list-style: none;
  padding: 0;
}

li {
  flex: 1 0 200px;
  height: 200px;
  border-right: 4px solid black;
  border-bottom: 4px solid black;
  background-color: deeppink;
}
li:empty {
  height: 0;
  border: none;
}

*,
:before,
:after {
  box-sizing: border-box;
}

<div>
  <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
    <li>g</li>
    <li>h</li>
    <li>i</li>
    <li>j</li>
    <li>k</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

In der Zukunft kann dies durch die Verwendung mehrerer ::after(n) erreicht werden.

Wie andere Poster bereits erwähnt haben, gibt es keine saubere Möglichkeit, die letzte Reihe mit Flexbox nach links auszurichten (zumindest gemäß der aktuellen Spezifikation). 

Was sich aber lohnt: Mit dem CSS Grid Layout Module ist das überraschend einfach zu erstellen:

Im Grunde läuft der relevante Code darauf hinaus:

ul {
  display: grid; /* 1 */
  grid-template-columns: repeat(auto-fill, 100px); /* 2 */
  grid-gap: 1rem; /* 3 */
  justify-content: space-between; /* 4 */
}

1) Machen Sie das Containerelement zu einem Gittercontainer

2) Legen Sie das Raster mit automatischen Spalten der Breite 100px fest. (Beachten Sie die Verwendung von auto-fill (wie bei auto-fit - das (bei einem einzeiligen Layout) leere Spuren auf 0 reduziert - was dazu führt, dass die Elemente den verbleibenden Speicherplatz belegen gerechtfertigtes 'space-between' Layout, wenn das Raster nur eine Zeile hat, was in unserem Fall nicht das ist, was wir wollen (überprüfen Sie diese Demo , um den Unterschied zwischen ihnen zu sehen)).

3) Legen Sie Lücken/Zwischenräume für die Rasterzeilen und -spalten fest. Da hier ein "Abstand" -Layout gewünscht wird, ist die Lücke tatsächlich eine minimale Lücke, da sie nach Bedarf wächst.

4) Ähnlich wie bei flexbox.

ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-gap: 1rem;
  justify-content: space-between;
  
  /* boring properties */
  list-style: none;
  background: wheat;
  padding: 2rem;
  width: 80vw;
  margin: 0 auto;
}

li {
  height: 50px;
  border: 1px solid green;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Codepen Demo (Größe ändern, um den Effekt zu sehen)

Das Hinzufügen von ::after funktionierte für mich ohne Angabe zusätzlicher Markierungen, indem die Spaltenbreite festgelegt wurde.

.grid {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}
.grid::after{
  content: '';
  width: 10em // Same width of .grid__element
}
.grid__element{
  width:10em;
}

Mit dem HTML wie folgt: 

<div class=grid">
   <div class="grid__element"></div>
   <div class="grid__element"></div>
   <div class="grid__element"></div>
</div>

Du kannst nicht Flexbox ist kein Rastersystem. Es verfügt nicht über die Sprachkonstrukte, um das zu tun, wonach Sie fragen, zumindest nicht, wenn Sie justify-content: space-between verwenden. Am besten können Sie mit Flexbox die Spaltenausrichtung verwenden, für die Sie eine explizite Höhe festlegen müssen:

http://cssdeck.com/labs/pvsn6t4z (Hinweis: Präfixe sind nicht enthalten)

ul {
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
  height: 4em;
}

Es ist jedoch einfacher, nur Spalten zu verwenden, was eine bessere Unterstützung bietet und keine Einstellung einer bestimmten Höhe erfordert:

http://cssdeck.com/labs/dwq3x6vr (Hinweis: keine Präfixe enthalten)

ul {
  columns: 15em;
}

Eine mögliche Lösung ist die Verwendung von justify-content: flex-start; für den .grid-Container, Größenbeschränkungen für untergeordnete Elemente und Ränder für entsprechende -Elemente - abhängig von der gewünschten Spaltenanzahl.

Für ein dreispaltiges Raster würde das grundlegende CSS folgendermaßen aussehen:

.grid {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}

.grid > * {
    flex: 0 0 32%;
    margin: 1% 0;
}

.grid > :nth-child(3n-1) {
    margin-left: 2%;
    margin-right: 2%;
}

Es ist eine andere unvollkommene Lösung, aber es funktioniert.

http://codepen.io/tuxsudo/pen/VYERQJ

Wenn Sie das letzte Element am Raster ausrichten möchten, verwenden Sie den folgenden Code:

Gittercontainer

.card-grid {
  box-sizing: border-box;
  max-height: 100%;
  display: flex;
  flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  justify-content: space-between;
  align-items: stretch;
  align-content: stretch;
  -webkit-box-align: stretch;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}

.card-grid:after {
  content: "";
  flex: 1 1 100%;
  max-width: 32%;
}

Gegenstand im Raster

.card {
  flex: 1 1 100%;
  box-sizing: border-box;
  -webkit-box-flex: 1;
  max-width: 32%;
  display: block;
  position: relative;

}

Der Trick besteht darin, die max-Breite des Elements gleich der max-Breite des .card-grid festzulegen: after. 

Live Demo auf Codepen

Ja.! Wir können aber bei einigen Medienabfragen & Maximum keine Spalten vorgeben .

Hier verwende ich 4 Spalten. Überprüfen Sie meinen Code:

.container {
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  flex-flow: row wrap;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
}

.container .item {
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  justify-content: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  flex-basis: 25%; //max no of columns in %, 25% = 4 Columns
}

.container .item .item-child {
  width: 130px;
  height: 180px;
  background: red;
  margin: 10px;
}

@media (max-width: 360px) {
  .container .item {
    flex-basis: 100%;
  }
}

@media (min-width:360px) and (max-width: 520px) {
  .container .item {
    flex-basis: 50%;
  }
}

@media (min-width:520px) and (max-width: 680px) {
  .container .item {
    flex-basis: 33.33%;
  }
}

<div class="container">

  <div class="item">
    <div class="item-child">1</div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>

</div>

HINWEIS
1) Keine Notwendigkeit, ein untergeordnetes Div zu erstellen. Es kann sich auch um ein beliebiges anderes Tag handeln, z. B. "img".
2) Wenn Sie mehr Spalten wünschen, passen Sie die Medienabfragen und die maximale Spaltenanzahl an. 

Wenn Sie ein Raster mit etwas Abstand zwischen den Elementen und den Elementen haben möchten, das ohne anfänglichen Platz beginnt, funktioniert diese einfache Lösung:

.grid {
    display: flex;
    flex-flow: row wrap;
    margin: 0 -5px; // remove the inital 5px space
    width: auto;
}
.grid__item {
    width: 25%;
    padding: 0 5px; // should be same as the negative margin above.
}

Wenn Sie den anfänglichen 5px-Speicherplatz wünschen, entfernen Sie einfach den negativen Rand :) Einfach.

https://jsfiddle.net/b97ewrno/2/

Die akzeptierte Antwort, obwohl gut, bewirkt, dass zwischen den Elementen in der zweiten Reihe kein Abstand ist.

Es ist möglich, "Flex-Start" zu verwenden und die Ränder manuell hinzuzufügen. Es erfordert etwas mathematisches Hacken, ist aber definitiv einfach und macht es leicht, mit einem CSS-Präprozessor wie LESS zu verwenden.

Siehe zum Beispiel dieses LESS-Mixin:

.flexboxGridMixin(@columnNumber,@spacingPercent) {
  @contentPercent: 100% - @spacingPercent;
  @sideMargin: @spacingPercent/(@columnNumber*2);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  > * {
    box-sizing: border-box;
    width: @contentPercent/@columnNumber;
    margin-left: @sideMargin;
    margin-right: @sideMargin;
  }
}

Und dann kann es leicht verwendet werden, um ein responsives Rasterlayout anzuzeigen:

ul {
  list-style: none;
  padding: 0;
  @spacing: 10%;
  @media only screen and (max-width: 499px) { .flexboxGridMixin(1,@spacing); }
  @media only screen and (min-width: 500px) { .flexboxGridMixin(2,@spacing); }
  @media only screen and (min-width: 700px) { .flexboxGridMixin(3,@spacing); }
  @media only screen and (min-width: 900px) { .flexboxGridMixin(4,@spacing); }
  @media only screen and (min-width: 1100px) { .flexboxGridMixin(5,@spacing); }
}

li {
  background: pink;
  height: 100px;
  margin-top: 20px;
}

Hier ist ein Beispiel von

http://codepen.io/anon/pen/YyLqVB?editors=110

Diese Version eignet sich am besten für Blöcke mit fester Breite:

http://codepen.io/7iomka/pen/oxxeNE

In anderen Fällen - Version von Dalgard

http://codepen.io/dalgard/pen/Dbnus

body {
  padding: 5%;
}

div {
  overflow: hidden;
  background-color: yellow;
}

ul {
  display: flex;
  flex-wrap: wrap;
justify-content:center;
  margin: 0 -4px -4px 0;
  list-style: none;
  padding: 0;
}

li {
  flex: 1 0 200px;
  height: 200px;
  max-width:200px;
  min-width:200px;
  border-right: 4px solid black;
  border-bottom: 4px solid black;
  background-color: deeppink;
}
li:empty {
  height: 0;
  border: none;
}

*,
:before,
:after {
  box-sizing: border-box;
}

<div>
  <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
    <li>g</li>
    <li>h</li>
    <li>i</li>
    <li>j</li>
    <li>k</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

Wenn Sie die Breite der Abstände zwischen den Elementen in der Zeile und die Anzahl der Elemente in einer Zeile kennen, funktioniert Folgendes:

Beispiel: 3 Elemente in einer Reihe, 10px Abstand zwischen den Elementen

div:last-child:nth-child(3n+2) {
  flex-grow: 1
  margin-left: 10px
}

Es gibt einen Weg ohne Flexbox, obwohl Sie die folgenden Bedingungen erfüllen müssten. 1) Der Container ist gepolstert. 2) Artikel haben die gleiche Größe und Sie wissen genau, wie viele Sie pro Zeile wünschen.

ul {
  padding: 0 3% 0 5%;
}
li {
  display: inline-block; 
  padding: 0 2% 2% 0;
  width: 28.66%;
}

Die kleinere Auffüllung auf der rechten Seite des Containers ermöglicht die zusätzliche Auffüllung rechts von jedem Listenelement. Unter der Annahme, dass andere Elemente in demselben übergeordneten Objekt wie das Listenobjekt mit 0 bis 5% aufgefüllt werden, ist es mit diesen bündig. Sie können die Prozentsätze auch an die gewünschte Breite anpassen oder die berechneten Pixelwerte verwenden.

Natürlich können Sie dasselbe tun, ohne die Auffüllung des Containers aufzufüllen, indem Sie nth-child (IE 9+) verwenden, um den Rand für jedes dritte Feld zu entfernen.

Dies ist eine Kombination aus vielen Antworten, tut aber genau das, was ich brauchte - das heißt, das letzte Kind in einem Flex-Container nach links ausrichten und dabei den Abstand zwischen den beiden beibehalten (in diesem Fall ist es eine Dreispalte) Layout).

Hier ist das Markup:

.flex-container {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}

.flex-container:after {
  content: "";
  flex-basis: 30%;
}

Das erreichen Sie ganz einfach mit Flexstart und Max-Breite.

https://codepen.io/moladukes/pen/NvzBrQ

.container {
  display: flex;
  justify-content: flex-start;
  flex-flow: row wrap;
}

.item { 
  width: 130px; 
  max-width: 130px; 
  height: 180px; 
  background: red; 
  margin: 20px; 
}

Mit Hilfe von Flexbox und ein paar Medienanfragen habe ich folgende kleine Umgehung gemacht: http://codepen.io/una/pen/yNEGjv

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  max-width: 1200px;
  margin: 0 auto;
}

.item {
  background-color: gray;
  height: 300px;
  flex: 0 30%;
  margin: 10px;

  @media (max-width: 700px) {
     flex: 0 45%;
  }

  @media (max-width: 420px) {
    flex: 0 100%;
  }

  &:nth-child(3n-1) {
    margin-left: 10px;
    margin-right: 10px;
  }
}

Das ist ziemlich hackig, aber es funktioniert für mich. Ich habe versucht, konsistente Abstände/Ränder zu erreichen.

.grid {
  width: 1024px;
  display: flex;
  flex-flow: row wrap;
  padding: 32px;
  background-color: #ddd;  

  &:after {
    content: "";
    flex: auto;
    margin-left:-1%;
  }

  .item {
    flex: 1 0 24.25%;
    max-width: 24.25%;
    margin-bottom: 10px;
    text-align: center;
    background-color: #bbb;

    &:nth-child(4n+2),
    &:nth-child(4n+3),
    &:nth-child(4n+4) {
      margin-left: 1%;
    }

    &:nth-child(4n+1):nth-last-child(-n+4),
      &:nth-child(4n+1):nth-last-child(-n+4) ~ .item {
        margin-bottom: 0;
    }    

  }
}

http://codepen.io/rustydev/pen/f7c8920e0beb0ba9a904da7ebd9970ae/

Hier sind noch ein paar Scss-Mixins. 

Diese Mixins gehen davon aus, dass Sie keine js-Plugins wie Isotope verwenden werden (sie respektieren die HTML-Markup-Reihenfolge, sodass sie mit css nth-Regeln durcheinander kommen).

Sie werden auch in der Lage sein, sie voll auszunutzen, vor allem, wenn Sie Ihre responsiven Haltepunkte zuerst mobil schreiben. Idealerweise verwenden Sie flexbox_grid () für den kleineren Haltepunkt und flexbox_cell () für die folgenden Haltepunkte. flexbox_cell () sorgt dafür, dass zuvor festgelegte Margen zurückgesetzt werden, die bei größeren Haltepunkten nicht mehr verwendet werden.

Übrigens: Solange Sie die Flex-Eigenschaften Ihres Containers korrekt eingerichtet haben, können Sie bei Bedarf nur flexbox_cell () für die Elemente verwenden.

Hier ist der Code:

// apply to the container (for ex. <UL> element)
@mixin flexbox_grid($columns, $Gutter_width){

  display: flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content: flex-start;

  > *{
    @include flexbox_cell($columns, $Gutter_width);
  }
}

// apply to the cell (for ex. a <LI> element)
@mixin flexbox_cell($columns, $Gutter_width){
  $base_width: 100 / $columns;
  $gutters: $columns - 1;
  $Gutter_offset: $Gutter_width * $gutters / $columns;

  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto; // IE10 doesn't support calc() here

  box-sizing:border-box; // so you can freely apply borders/paddings to items
  width: calc( #{$base_width}% - #{$Gutter_offset} );

  // remove useless margins (for cascading breakponts)
  &:nth-child(#{$columns}n){
    margin-right: 0;
  }

  // apply margin
  @for $i from 0 through ($gutters){
    @if($i != 0){
      &:nth-child(#{$columns}n+#{$i}){
        margin-right: $Gutter_width;
      }
    }
  }
}

Verwendungszweck:

ul{
   // just this:
   @include flexbox_grid(3,20px);
}

// and maybe in following breakpoints, 
// where the container is already setted up, 
// just change only the cells:

li{
   @include flexbox_cell(4,40px);
}

Offensichtlich liegt es an Ihnen, die Polsterung/Breite/Breite des Containers und die unteren Ränder der Zelle und dergleichen einzustellen.

Ich hoffe es hilft!

Vorausgesetzt:

• Sie möchten ein 4-Spalten-Rasterlayout mit Umbruch
• Die Anzahl der Elemente ist nicht notwendigerweise ein Vielfaches von 4

Legen Sie einen linken Rand für jedes Element außer dem ersten, fünften und neunten Element usw. fest. Wenn der linke Rand 10 Pixel beträgt, hat jede Zeile einen Rand von 30 Pixeln, der auf 4 Elemente verteilt ist. Die prozentuale Breite für Artikel wird wie folgt berechnet:

100% / 4 - horizontal-border - horizontal-padding - left-margin * (4 - 1) / 4

Dies ist eine anständige Problemumgehung für Probleme mit der letzten Reihe der Flexbox.

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 1em 0 3em;
  background-color: peachpuff;
}

.item {
  margin-left: 10px;
  border: 1px solid;
  padding: 10px;
  width: calc(100% / 4 - 2px - 20px - 10px * (4 - 1) / 4);
  background-color: papayawhip;
}

.item:nth-child(4n + 1) {
  margin-left: 0;
}

.item:nth-child(n + 5) {
  margin-top: 10px;
}

<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
<div class="flex">
  <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>
<div class="flex">
  <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 class="item">8</div>
  <div class="item">9</div>
</div>

Es scheint, dass niemand die Flex-Grow-Lösung für den letzten Artikel vorgeschlagen hat .. __ Die Idee ist, dass Ihr letzter Flex-Artikel all den Platz einnimmt, der mit Flex-Grow möglich ist: 1.

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.grid > *:last-child {
  flex-grow: 1;
}

Hinweis: Diese Lösung ist nicht perfekt, vor allem, wenn Sie Elemente innerhalb Ihrer Flex-Artikel zentriert haben, da sie sich auf den möglicherweise riesigen letzten Flex-Artikel konzentrieren.

Ich habe ein SCSS-Mixin dafür gemacht.

@mixin last-row-flexbox($num-columns, $width-items){

  $filled-space: $width-items * $num-columns;
  $margin: calc((100% - #{$filled-space}) / (#{$num-columns} - 1));

  $num-cols-1 : $num-columns - 1;

  &:nth-child(#{$num-columns}n+1):nth-last-child(-n+#{$num-cols-1}) ~ & {
    margin-left: $margin;
  }
  @for $i from 1 through $num-columns - 2 { 
    $index: $num-columns - $i;
    &:nth-child(#{$num-columns}n+#{$index}):last-child{
      margin-right: auto;
    }
  }
}

Dies ist der Codepen-Link: http://codepen.io/diana_aceves/pen/KVGNZg

Sie müssen lediglich die Breite der Elemente in Prozent und die Anzahl der Spalten festlegen.

Ich hoffe das kann dir helfen.

Ich weiß, es gibt viele Antworten, aber ... Der einfachste Weg, dies zu tun, ist mit einer grid anstelle von flex und grid template columns mit repeat und auto fills, wobei Sie die Anzahl der Pixel einstellen müssen, die Sie jedem Element, 100px, gegeben haben Code-Code.

.exposegrid {
     display: grid;
     grid-template-columns: repeat(auto-fill, 100px);
     justify-content: space-between;
}
 .exposetab {
     width: 100px;
     height: 66px;
     background-color: rgba(255, 255, 255, 0.2);
     border: 1px solid rgba(0, 0, 0, 0.4);
     border-radius: 5px;
     box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
     margin-bottom: 10px;
}

<div class="exposegrid">
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
</div>