Flex-box: Letzte Reihe an Raster ausrichten

Question

Ich habe ein einfaches Flexbox-Layout mit einem Container wie folgt:

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

Jetzt möchte ich, dass die Elemente in der letzten Zeile mit den anderen ausgerichtet werden. justify-content: space-between; sollte verwendet werden, da die Breite und Höhe des Rasters angepasst werden können.

Aktuell sieht es so aus

Hier möchte ich, dass das Element unten rechts in der "mittleren Spalte" ist. Wie kann ich das am einfachsten erreichen? Hier ist ein kleines jsfiddle, das dieses Verhalten zeigt.

.exposegrid {
  display: flex;
  flex-flow: row wrap;
  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;
}

Answer 1

Unter Verwendung von Flexbox und ein paar Medienabfragen habe ich diesen kleinen Workaround erstellt: http://codepen.io/una/pen/yNEGjv (es ist etwas gehackt, funktioniert aber):

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

Answer 2

Verwenden Sie einfach den JQuery/Javascript-Trick, um ein leeres div hinzuzufügen:

if($('.exposegrid').length%3==2){
 $(".exposegrid").append('');
}

Answer 3

Hier sind noch ein paar SCSS-Mixins.

Diese Mixins gehen davon aus, dass du keine JS-Plugins wie Isotope verwenden wirst (sie respektieren nicht die Reihenfolge der HTML-Markierung und beeinträchtigen daher die CSS nth-Regeln).

Außerdem kannst du sie besonders gut nutzen, wenn du deine responsiven Breakpoints im Mobile-First-Stil schreibst. Am besten verwendest du flexbox_grid() für den kleineren Breakpoint und flexbox_cell() für die folgenden Breakpoints. flexbox_cell() setzt zuvor festgelegte Ränder zurück, die auf größeren Breakpoints nicht mehr verwendet werden.

Übrigens: wenn du die flex-Eigenschaften deines Containers richtig einrichtest, kannst du auch nur flexbox_cell() für die Elemente verwenden, falls nötig.

Hier ist der Code:

// auf den Container anwenden (zum Beispiel 

Verwendung:

ul{
   // nur das hier:
   @include flexbox_grid(3,20px);
}

// und vielleicht in folgenden Breakpoints, 
// wo der Container bereits eingerichtet ist, 
// ändere nur die Zellen:

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

Natürlich liegt es an dir, letztendlich Container-Padding/Margin/Breite und Zellen-Bottom-Margen und dergleichen festzulegen.

Hoffentlich hilft es!

Answer 4

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

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

Du musst nur die Breite der Elemente in Prozent und die Anzahl der Spalten einstellen.

Ich hoffe, das kann dir helfen.

Answer 5

Ich konnte es mit justify-content: space-between auf dem Container machen