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

Ja.! Wir können es, aber mit einigen Medienabfragen & Die maximale Anzahl der Spalten ist vordefiniert.

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%; //maximale Anzahl von Spalten in %, 25% = 4 Spalten
}

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

    1

HINWEIS
1) Es ist nicht erforderlich, ein Kind-Div zu erstellen. Es kann ein beliebiges anderes Tag wie 'img' oder was auch immer sein..
2) Wenn Sie mehr Spalten möchten, passen Sie die Medienabfragen und die maximale Anzahl von Spalten an.

Answer 2

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

Rastercontainer

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

Element 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-width des Elements auf die max-width des .card-grid:after zu setzen.

Live-Demo auf Codepen

Answer 3

Wenn Sie Elemente im Rasteransicht mit gleichem Abstand ausrichten möchten, auch für das letzte Element, stellen Sie sicher, dass die Kartenbreite 100% beträgt. Verwenden Sie den folgenden CSS-Code. Dies funktioniert ziemlich gut

.container {
  /* ... Ausschnitt ... */
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  justify-content: space-between;
  grid-gap: 20px;
}

Answer 4

Es ist möglich, "flex-start" zu verwenden und die Ränder manuell hinzuzufügen. Es erfordert ein wenig Mathe-Hacking, ist aber definitiv einfach zu tun und auch einfach zu verwenden mit einem CSS-Präprozessor wie LESS.

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

Answer 5

Dies ist eine Kombination vieler Antworten, aber es macht genau das, was ich brauchte - nämlich das Ausrichten des letzten Elements in einem Flex-Container nach links, während das space-between-Verhalten beibehalten wird (in diesem Fall ist es ein Layout mit drei Spalten).

Hier ist die Markup:

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

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