Flex-box: Wyrównaj ostatni rząd do siatki

Mam prosty układ flex-box z pojemnikiem takim jak:

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

Teraz chcę, aby elementy w ostatnim rzędzie były wyrównane z innymi. justify-content: space-between;należy stosować, ponieważ szerokość i wysokość siatki można regulować.

Obecnie tak wygląda

Tutaj chcę, aby element w prawym dolnym rogu znajdował się w „środkowej kolumnie”. Jaki jest najprostszy sposób na osiągnięcie tego? Oto mały jsfiddle, który pokazuje to zachowanie.

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

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

Dodaj ::afterautomatycznie wypełniające miejsce. Nie musisz zanieczyszczać swojego HTML. Oto kodepen, który to pokazuje: http://codepen.io/DanAndreasson/pen/ZQXLXj

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

.grid::after {
  content: "";
  flex: auto;
}

Jedną z technik byłoby wstawienie pewnej liczby dodatkowych elementów (tyle, ile maksymalna liczba elementów, których można oczekiwać w rzędzie), które mają zerową wysokość. Przestrzeń jest nadal podzielona, ​​ale zbędne wiersze zapadają się w nicość:

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>

W przyszłości może to zostać osiągnięte poprzez użycie wielu ::after(n).

Jak wspomniano w innych plakatach - nie ma czystego sposobu wyrównania do lewej strony ostatniego wiersza za pomocą Flexboksa (przynajmniej zgodnie z bieżącą specyfikacją)

Jednak za to, co jest warte: dzięki modułowi układu siatki CSS jest to zaskakująco łatwe do wytworzenia:

Zasadniczo odpowiedni kod sprowadza się do tego:

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

1) Ustaw element kontenera w kontener siatkowy

2) Ustaw siatkę z automatycznymi kolumnami o szerokości 100px. (Zwróć uwagę na użycie funkcji autouzupełniania (stosowanej do auto-fit- która (dla układu 1-wierszowego) zwija puste ścieżki do zera - powodując, że elementy rozszerzają się, aby zająć pozostałe miejsce. Spowodowałoby to uzasadnione „odstęp między 'układ, gdy siatka ma tylko jeden wiersz, który w naszym przypadku nie jest tym, czego chcemy. (sprawdź to demo, aby zobaczyć różnicę między nimi)).

3) Ustaw odstępy / rynny dla rzędów i kolumn siatki - tutaj, ponieważ chcesz mieć układ „odstępu” - odstęp będzie faktycznie odstępem minimalnym, ponieważ będzie się powiększał w miarę potrzeby.

4) Podobne do 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 (zmiana rozmiaru, aby zobaczyć efekt)

Bez żadnych dodatkowych znaczników, po prostu dodanie ::afterdziałało dla mnie, określając szerokość kolumny.

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

Z HTML takim jak ten:

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

Nie możesz Flexbox nie jest systemem gridowym. Nie ma konstrukcji językowych do robienia tego, o co prosisz, a przynajmniej nie, jeśli używasz justify-content: space-between. Najbliższe, jakie można uzyskać za pomocą Flexbox, to użycie orientacji kolumny, która wymaga ustawienia wyraźnej wysokości:

http://cssdeck.com/labs/pvsn6t4z (uwaga: prefiksy nie są dołączone)

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

Łatwiej byłoby jednak po prostu użyć kolumn, które mają lepsze wsparcie i nie wymagają ustawiania określonej wysokości:

http://cssdeck.com/labs/dwq3x6vr (uwaga: prefiksy nie są dołączone)

ul {
  columns: 15em;
}

Możliwym rozwiązaniem jest zastosowanie justify-content: flex-start;na .gridkontenerze, ograniczeń wielkości dla jego elementów podrzędnych i marginesów na odpowiednich elementach podrzędnych - w zależności od pożądanej liczby kolumn.

W przypadku siatki 3-kolumnowej podstawowy CSS wyglądałby tak:

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

To kolejne niedoskonałe rozwiązanie, ale działa.

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

Wiem, że jest tu wiele odpowiedzi, ale .. Najprostszym sposobem na to jest gridużycie zamiast flexi za grid template columnspomocą repeatoraz auto fills, gdzie musisz ustawić liczbę pikseli, które podałeś każdemu elementowi, 100pxz kodu fragmentu.

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

Tak.! Możemy, ale z pewnymi zapytaniami o media i maksymalną liczbą kolumn jest predefiniowanych .

Tutaj używam 4 kolumn. Sprawdź mój kod:

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

UWAGA
1) Nie ma potrzeby tworzenia div dziecka. Może to być dowolny inny znacznik, taki jak „img” r, cokolwiek chcesz.
2) Jeśli chcesz uzyskać więcej kolumn, dostosuj zapytania o media i maksymalną liczbę kolumn.

Jeśli chcesz siatkę z pewną przestrzenią między elementami i elementami rozpoczynającymi się bez początkowej spacji, to proste rozwiązanie działa:

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

Jeśli chcesz początkowej przestrzeni 5 pikseli, po prostu usuń ujemny margines :) Proste.

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

Przyjęta odpowiedź, choć dobra, powoduje, że między elementami w drugim rzędzie nie ma miejsca.

Jeśli chcesz wyrównać ostatni element do siatki, użyj następującego kodu:

Pojemnik siatkowy

.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 w siatce

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

}

Sztuczka polega na ustawieniu maksymalnej szerokości elementu równej maksymalnej szerokości .card-grid: after.

Demo na żywo na Codepen

Możliwe jest użycie „flex-start” i ręczne dodanie marginesów. Wymaga hakowania matematycznego, ale jest zdecydowanie łatwy do wykonania i ułatwia korzystanie z preprocesora CSS, takiego jak LESS.

Zobacz na przykład ten MNIEJ 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;
  }
}

A następnie można go łatwo użyć do wyświetlenia responsywnego układu siatki:

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

Oto przykład

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

Ten problem został dla mnie rozwiązany za pomocą siatki CSS,

To rozwiązanie ma zastosowanie tylko wtedy, gdy masz ustaloną liczbę kolumn, tj. Nie. elementów do wyświetlenia w jednym rzędzie

-> używając siatki, ale nie określając liczby wierszy, ponieważ liczba elementów zwiększa się, zawija się w kolumny i dynamicznie dodaje rzędy, w tym przykładzie podałem trzy kolumny

-> nie musisz dawać żadnej pozycji swojemu dziecku / komórce, ponieważ spowoduje to naprawę, czego nie chcemy.

.grid-class{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 80px;
}

Ta wersja jest najlepszym sposobem dla bloków o stałej szerokości:

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

W innych przypadkach - wersja 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>

Istnieje sposób bez Flexboksa, chociaż musisz spełnić następujące warunki. 1) Pojemnik ma wypełnienie. 2) Przedmioty mają ten sam rozmiar i dokładnie wiesz, ile chcesz na linię.

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

Mniejsze wypełnienie po prawej stronie kontenera pozwala na dodatkowe wypełnienie po prawej stronie każdego elementu listy. Zakładając, że inne elementy w tym samym obiekcie nadrzędnym co obiekt listy są uzupełnione wartością 0 5%, będzie z nimi równo. Możesz także dopasować wartości procentowe do dowolnych marginesów lub użyć wartości pikseli.

Oczywiście możesz zrobić to samo bez wypełniania kontenera, używając n-child (IE 9+), aby usunąć margines na co trzecim polu.

Korzystając z Flexboksa i kilku zapytań o media, zrobiłem to małe obejście: http://codepen.io/una/pen/yNEGjv (jest trochę zhackowane, ale działa):

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

Zrobiłem dla niego mixin SCSS.

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

To jest link do codepen: http://codepen.io/diana_aceves/pen/KVGNZg

Musisz tylko ustawić szerokość elementów w procentach i liczbie kolumn.

Mam nadzieję, że ci to pomoże.

Oto kolejna para miksów scss.

Te miksy zakładają, że nie będziesz używać wtyczek js, takich jak Isotope (nie przestrzegają one kolejności znaczników html, przez co psują się nth regułami css).

Będziesz mógł w pełni z nich skorzystać, zwłaszcza jeśli najpierw piszesz swoje responsywne punkty przerwania. Najlepiej będzie użyć flexbox_grid () w mniejszym punkcie przerwania i flexbox_cell () w następujących punktach przerwania. flexbox_cell () zajmie się resetowaniem wcześniej ustawionych marginesów, które nie są już używane w większych punktach przerwania.

A tak przy okazji, dopóki poprawnie skonfigurujesz właściwości flex kontenera, możesz także użyć tylko flexbox_cell () na elementach, jeśli to konieczne.

Oto kod:

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

Stosowanie:

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

Oczywiście od Ciebie zależy ostateczne ustawienie wypełnienia / marginesu / szerokości kontenera oraz dolnych marginesów komórki i tym podobnych.

Mam nadzieję, że to pomoże!

To dość zuchwałe, ale działa dla mnie. Starałem się osiągnąć spójne odstępy / marginesy.

.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/

Wygląda na to, że nikt nie zaproponował rozwiązania flex-grow dla ostatniego przedmiotu. Chodzi o to, aby twój ostatni przedmiot Flex zajął tyle miejsca, ile może, używając Flex-Grow: 1.

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

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

Uwaga: To rozwiązanie nie jest idealne, szczególnie jeśli masz wyśrodkowane elementy w elementach elastycznych, ponieważ będą one wyśrodkowane na możliwie dużym ostatnim elemencie elastycznym.

Jest to kombinacja wielu odpowiedzi, ale robi dokładnie to, czego potrzebowałem - czyli wyrównuje ostatnie dziecko w elastycznym pojemniku po lewej stronie, zachowując zachowanie odstępu między nimi (w tym przypadku jest to trzykolumna układ).

Oto znaczniki:

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

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

Zarozumiały:

• Chcesz 4-kolumnowy układ siatki z zawijaniem
• Liczba przedmiotów niekoniecznie jest wielokrotnością 4

Ustaw lewy margines na każdym elemencie z wyjątkiem 1, 5 i 9 elementu i tak dalej. Jeśli lewy margines wynosi 10 pikseli, wówczas każdy wiersz będzie miał margines 30 pikseli podzielony na 4 elementy. Procentowa szerokość towaru jest obliczana w następujący sposób:

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

Jest to przyzwoite obejście problemów dotyczących ostatniego rzędu Flexboksa.

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

Jeśli znasz szerokość odstępów między elementami w rzędzie i liczbę elementów w rzędzie, zadziałałoby to:

Przykład: 3 elementy z rzędu, odstęp 10 pikseli między elementami

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

Po prostu użyj sztuczki Jquery / JavaScript, aby dodać pusty div:

if($('.exposegrid').length%3==2){
 $(".exposegrid").append('<div class="exposetab"></div>');
}

Och chłopcze, myślę, że znalazłem dobre rozwiązanie z minimalnym CSS i bez JS. Sprawdź to:

img {width:100%;}
li {
  display: inline-block;
  width:8em;
  list-style:none;
}
ul {text-align: justify;}

<ul>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Kluczem tutaj jest zapamiętanie, że to, co próbujemy osiągnąć, jest dokładnie tym, co text-align: justifyrobi!

Puste elementy w kodzie HTML mają na celu idealne wyświetlanie ostatniego wiersza bez zmiany wyglądu, ale mogą nie być potrzebne, biorąc pod uwagę to, co próbujesz osiągnąć. Aby uzyskać idealną równowagę w każdej sytuacji, potrzebujesz co najmniej x-4 pustych elementów, x oznacza liczbę elementów do wyświetlenia lub n-2, n oznacza liczbę kolumn, które chcesz wyświetlić.

Wystarczy dodać kilka fałszywych przedmiotów o tych samych właściwościach, z wyjątkiem wysokości ustawionej na 0px do końca.

chcesz wyrównać

użyj align-content: flex-start;zamiastjustify-content: space-between;

powoduje to przesunięcie elementów z ostatniego rzędu w lewo, a także równomierne rozłożenie przestrzeni,

.container {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  /*justify-content: space-between; remove this line!!!! */ 
}

https://codepen.io/anon/pen/aQggBW?editors=1100

Rozwiązanie danAnderson NIE JEST DYNAMICZNE .PERİOD !!

gdy szerokość elementu zmieniła się z 25 na 28 dan anderson traci przestrzeń między obrazami

danAnderson: https://codepen.io/anon/pen/ZwYPmB?editors=1100

dynamiczny: https://codepen.io/anon/pen/aQggBW?editors=1100

to właśnie próbowałem powiedzieć. dans jest hacky .....

Byłem w stanie to zrobić justify-content: space-betweenna pojemniku