Esnek kutu: Son satırı ızgaraya hizala

Ben gibi bir konteyner ile basit bir esnek kutu düzeni var:

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

Şimdi son satırdaki öğelerin diğeriyle hizalanmasını istiyorum. justify-content: space-between;kullanılmalıdır çünkü ızgaranın genişliği ve yüksekliği ayarlanabilir.

Şu anda benziyor

Burada, sağ alttaki öğenin "orta sütun" içinde olmasını istiyorum. Bunu başarmanın en basit yolu nedir? İşte bu davranışı gösteren küçük bir jsfiddle .

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

::afterAlanı otomatik olarak dolduran bir ekleyin . HTML'nizi kirletmenize gerek yok. İşte gösteren bir kodlama: http://codepen.io/DanAndreasson/pen/ZQXLXj

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

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

Bir teknik, sıfır yükseklik verilen bir dizi ekstra eleman (bir satırda olmasını beklediğiniz maksimum eleman sayısı kadar) eklemek olacaktır. Alan hala bölünmüş, ancak gereksiz satırlar hiçbir şeye çökmüyor:

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>

Gelecekte, bu çoklu kullanarak elde edilebilir ::after(n).

Diğer posterlerin de belirttiği gibi - son satırı flexbox ile sola hizalamanın temiz bir yolu yoktur (en azından mevcut spesifikasyona göre)

Ancak, değeri ne olursa olsun: CSS Grid Layout Module ile bu üretimin şaşırtıcı derecede kolay olması:

Temel olarak ilgili kod şuna bağlanır:

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

1) Konteyner elemanını bir ızgara kabı yapın

2) Izgarayı 100 piksel genişliğinde otomatik sütunlarla ayarlayın. ( Otomatik doldurmanın ( auto-fit1 satırlık yerleşim için) boş parçaların 0'a daralmasına neden olarak öğelerin kalan alanı kaplayacak şekilde genişlemesine neden olduğunu unutmayın. 'ızgara, yalnızca bir satır içerdiğinde, bizim durumumuzda istediğimiz şey değildir. ( aralarındaki farkı görmek için bu demoya göz atın ).

3) Izgara satırları ve sütunları için boşluklar / oluklar ayarlayın - burada, bir 'arasında boşluk' düzeni istediği için, boşluk aslında minimum bir boşluk olacaktır, çünkü gerektiğinde büyüyecektir.

4) Flexbox'a benzer.

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 (Efekti görmek için yeniden boyutlandır)

Ek bir işaretleme olmadan, sadece ::aftersütun genişliğini belirterek benim için çalıştı.

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

Aşağıdaki gibi HTML ile:

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

Yapamazsın. Flexbox bir ızgara sistemi değildir. En azından kullanıyorsanız, dilediğiniz şeyi yapacak dil yapılarına sahip değil justify-content: space-between. Flexbox ile alabileceğiniz en yakın nokta, açık bir yükseklik ayarlamayı gerektiren sütun yönünü kullanmaktır:

http://cssdeck.com/labs/pvsn6t4z (not: önekler dahil değildir)

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

Bununla birlikte, yalnızca daha iyi desteği olan ve belirli bir yükseklik ayarlamayı gerektirmeyen sütunları kullanmak daha kolay olacaktır:

http://cssdeck.com/labs/dwq3x6vr (not: önekler dahil değildir)

ul {
  columns: 15em;
}

Olası bir çözüm kullanmaktır justify-content: flex-start;ile .gridilgili konteyner, kendi çocuk boyut sınırlamaları ve kenar uygun sütun istenen sayısına bağlı olarak - alt öğeleri.

3 sütunlu bir ızgara için temel CSS şöyle görünür:

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

Başka bir kusurlu çözüm, ama işe yarıyor.

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

Burada birçok cevap olduğunu biliyorum ama .. Bunu yapmanın en basit yolu gridyerine flexve grid template columnsile repeatve auto fillsher öğeye verdiğiniz piksel sayısını 100pxsnippet kodunuzdan ayarlamak zorunda olduğunuzdur .

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

Evet.! Yapabiliriz ancak bazı medya sorguları ve Maksimum sütun sayısı önceden tanımlanmıştır .

Burada 4 sütun kullanıyorum. Kodumu kontrol et:

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

NOT
1) Alt div oluşturmaya gerek yoktur.
İsterseniz 'img' r gibi başka bir etiket olabilir. 2) Daha fazla sütun istiyorsanız, medya sorgularını ve sütunların maksimum sayısını ayarlayın.

İlk boşluk olmadan başlayan öğeler ve öğeler arasında biraz boşluk bulunan bir ızgara istiyorsanız, bu basit çözüm işe yarar:

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

İlk 5 piksel alanı istiyorsanız, sadece negatif kenar boşluğunu kaldırın :) Basit.

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

Kabul edilen cevap, iyi olsa da, ikinci satırdaki öğeler arasında boşluk olmamasına neden olur.

Son öğeyi ızgaraya hizalamak istiyorsanız aşağıdaki kodu kullanın:

Izgara kabı

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

Izgaradaki öğe

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

}

Hile, öğenin maksimum genişliğini .card-grid: after maksimum genişliğine eşit olarak ayarlamaktır.

Codepen'de canlı demo

"Flex-start" kullanmak ve kenar boşluklarını manuel olarak eklemek mümkündür. Bazı matematik korsanlığı gerektirir, ancak kesinlikle kolaydır ve LESS gibi bir CSS ön işlemcisi ile kullanımı kolaylaştırır.

Bkz.

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

Ve sonra duyarlı bir ızgara düzenini görüntülemek için kolayca kullanılabilir:

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

İşte bir örnek

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

Bu sorun benim için CSS ızgarası kullanılarak çözüldü,

Bu çözüm yalnızca sabit sayıda sütun varsa, yani hayır. satırda görüntülenecek öğelerin listesi

-> ızgara kullanarak ancak satır sayısını belirtmemekle birlikte, öğe sayısı arttıkça sütunlara sarılır ve dinamik olarak satır eklenir, bu örnekte üç sütun belirledim

-> çocuğunuza / hücrelere herhangi bir pozisyon vermek zorunda değilsiniz.

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

Bu sürüm, sabit genişliğe sahip bloklar için en iyi yoldur:

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

Diğer durumlarda - dalgard versiyonu

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>

Flexbox olmadan bir yol var, ancak aşağıdaki koşulları yerine getirmeniz gerekiyor. 1) Konteyner dolgusu vardır. 2) Öğeler aynı boyuttadır ve satır başına kaç tane istediğinizi tam olarak bilirsiniz.

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

Kabın sağ tarafındaki daha küçük dolgu, her liste öğesinin sağında fazladan dolgu yapılmasına izin verir. Liste nesnesiyle aynı üst öğedeki diğer öğelerin% 0 5 ile doldurulduğunu varsayarsak, onlarla aynı hizada olur. Ayrıca yüzdeleri istediğiniz kadar kenar boşluğuna ayarlayabilir veya px değerlerini hesaplamak için kullanabilirsiniz.

Tabii ki, her üçüncü kutudaki kenar boşluğunu kaldırmak için nth-child (IE 9+) kullanarak kaptaki dolgu olmadan aynısını yapabilirsiniz.

Flexbox ve birkaç medya sorgusu kullanarak, bu küçük geçici çözüm yaptım: http://codepen.io/una/pen/yNEGjv (biraz hacky ama çalışır):

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

Bunun için bir SCSS karışımı yaptım.

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

Kod bağlantısı bağlantısı: http://codepen.io/diana_aceves/pen/KVGNZg

Yalnızca öğe genişliğini yüzde ve sütun sayısı olarak ayarlamanız gerekir.

umuyorum ki bu sana yardım edebilir.

İşte başka bir scss karışımı daha.

Bu karışımlar, Isotope gibi js eklentilerini kullanmayacağınızı varsayar (html işaretleme sırasına uymazlar, böylece css nth kurallarıyla uğraşırlar).

Ayrıca, özellikle duyarlı kesme noktalarınızı ilk önce mobil olarak yazıyorsanız, bunlardan tam olarak yararlanabilirsiniz. İdeal olarak, daha küçük kesme noktasında flexbox_grid () ve aşağıdaki kesme noktalarında flexbox_cell () kullanırsınız. flexbox_cell (), daha büyük kesme noktalarında artık kullanılmayan önceden ayarlanmış kenar boşluklarını sıfırlamaya özen gösterir.

Bu arada, kabınızın esnek özelliklerini doğru bir şekilde ayarladığınız sürece, gerekiyorsa öğeler üzerinde yalnızca flexbox_cell () kullanabilirsiniz.

İşte 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;
      }
    }
  }
}

Kullanımı:

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

Açıkçası, sonunda kabın dolgu / kenar boşluğu / genişliğini ve hücrenin alt kenar boşluklarını ve benzerini ayarlamak size kalmış.

Umarım yardımcı olur!

Bu oldukça acayip, ama benim için çalışıyor. Tutarlı aralık / kenar boşlukları elde etmeye çalışıyordum.

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

Hiç kimse son ürün üzerinde flex-grow çözümü önermiyor gibi görünüyor. Fikir, flex-grow kullanarak yapabileceği her şeyi almak için son flex öğenize sahip olmaktır: 1.

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

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

Not: Bu çözüm, özellikle de esnek öğelerinizin içinde ortalanmış öğeler varsa, muhtemelen büyük son esnek öğeye odaklanacağı için mükemmel değildir.

Bu, birçok cevabın bir kombinasyonudur, ancak tam olarak ihtiyacım olanı yapar - yani, esnek bir kaptaki son çocuğu sola hizalayarak aralarındaki boşluğu korurken (bu durumda üç sütunludur) Yerleşim).

İşte işaretleme:

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

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

varsayarsak:

• Sarma ile 4 sütun ızgara düzeni istiyorsunuz
• Öğe sayısı mutlaka 4'ün katı değil

1., 5. ve 9. öğeler hariç her öğe için sol kenar boşluğu ayarlayın. Sol kenar boşluğu 10 piksel ise, her satır 4 öğeye dağıtılmış 30 piksel kenar boşluğuna sahip olur. Öğe için yüzde genişliği şu şekilde hesaplanır:

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

Bu, flexbox'ın son sırasını içeren sorunlar için iyi bir çözümdür.

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

Satırdaki öğeler arasındaki boşlukların genişliğini ve bir satırdaki öğelerin miktarını biliyorsanız, bu işe yarayacaktır:

Örnek: Arka arkaya 3 öğe, öğeler arasında 10 piksel boşluk

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

Boş bir div eklemek için Jquery / Javascript hile kullanın:

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

Oh oğlum, sanırım minimal CSS ve JS olmayan iyi bir çözüm buldum. Bunu kontrol et:

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>

Buradaki anahtar, elde etmeye çalıştığımız şeyin tam olarak ne olduğunu hatırlamaktır text-align: justify!

HTML'deki boş öğeler, görünümü değiştirmeden son satır görüntüsünü mükemmel hale getirmek için vardır, ancak elde etmeye çalıştığınız şey göz önüne alındığında gerekli olmayabilir. Her durumda mükemmel denge için, en az x-4 boş öğeye ihtiyacınız vardır, x görüntülenecek öğelerin sayısı veya n-2, n görüntülemek istediğiniz sütun sayısıdır.

Sonuna 0 piksel olarak ayarlanan yükseklik dışında aynı özelliklere sahip birkaç sahte öğe eklemeniz yeterlidir.

hizalamak istiyorsun

align-content: flex-start;yerine kullanjustify-content: space-between;

bu, öğelerin son satırını sola çeker ve ayrıca alanı eşit olarak dağıtır,

.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

danAnderson çözümü DİNAMİK DEĞİLDİR. PERİOD !!

öğe genişliği 25'ten 28'e değiştiğinde anderson görüntüler arasında boşluk kalmaz

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

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

söylemeye çalıştığım şey bu. dans hacky .....

justify-content: space-betweenKonteyner üzerinde yapabildim