Flex-box: Căn chỉnh hàng cuối cùng vào lưới

Tôi có một bố trí hộp flex đơn giản với một thùng chứa như:

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

Bây giờ tôi muốn các mục trong hàng cuối cùng được liên kết với nhau. justify-content: space-between;nên được sử dụng vì chiều rộng và chiều cao của lưới có thể được điều chỉnh.

Hiện tại có vẻ như

Ở đây, tôi muốn mục ở dưới cùng bên phải nằm trong "cột giữa". Cách đơn giản nhất để thực hiện điều đó là gì? Dưới đây là một jsfiddle nhỏ cho thấy hành vi này.

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

Thêm một ::aftercái mà tự động điền vào không gian. Không cần làm ô nhiễm HTML của bạn. Đây là một codepen hiển thị nó: http://codepen.io/DanAndreasson/pen/ZQXLXj

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

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

Một kỹ thuật sẽ là chèn một số phần tử bổ sung (nhiều nhất là số phần tử tối đa bạn từng mong muốn có trong một hàng) được cho chiều cao bằng không. Không gian vẫn được phân chia, nhưng các hàng thừa không có gì sụp đổ:

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>

Trong tương lai, điều này có thể trở nên khả thi thông qua việc sử dụng nhiều ::after(n).

Như các áp phích khác đã đề cập - không có cách nào rõ ràng để căn chỉnh hàng cuối cùng với flexbox (ít nhất là theo thông số kỹ thuật hiện tại)

Tuy nhiên, với giá trị của nó: Với Mô-đun Bố cục Lưới CSS, điều này thật dễ dàng để tạo ra:

Về cơ bản các mã có liên quan nắm rõ điều này:

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

1) Làm cho phần tử container thành một thùng chứa lưới

2) Đặt lưới với các cột tự động có chiều rộng 100px. (Lưu ý việc sử dụng tự động điền (đối lập với sự auto-fit- đó (đối với một bố trí 1 hàng) sụp đổ track trống tỉ số 0 -. Gây các mục cần mở rộng để chiếm không gian còn lại này sẽ cho kết quả trong một 'không gian giữa lý 'Bố cục khi lưới chỉ có một hàng mà trong trường hợp của chúng tôi không phải là thứ chúng tôi muốn. (hãy xem bản demo này để thấy sự khác biệt giữa chúng)).

3) Đặt khoảng trống / máng xối cho các hàng và cột lưới - ở đây, vì muốn bố trí 'khoảng cách giữa' - khoảng cách thực sự sẽ là một khoảng cách tối thiểu vì nó sẽ tăng lên khi cần thiết.

4) Tương tự như 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 (Thay đổi kích thước để xem hiệu ứng)

Không có bất kỳ đánh dấu bổ sung, chỉ cần thêm ::afterlàm việc cho tôi chỉ định chiều rộng của cộ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;
}

Với HTML như thế này:

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

Bạn không thể. Flexbox không phải là một hệ thống lưới. Nó không có cấu trúc ngôn ngữ để làm những gì bạn yêu cầu, ít nhất là không nếu bạn đang sử dụng justify-content: space-between. Cách gần nhất bạn có thể nhận được với Flexbox là sử dụng hướng cột, yêu cầu đặt chiều cao rõ ràng:

http://cssdeck.com/labs/pvsn6t4z (lưu ý: không bao gồm tiền tố)

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

Tuy nhiên, sẽ đơn giản hơn khi chỉ sử dụng các cột, có hỗ trợ tốt hơn và không yêu cầu đặt chiều cao cụ thể:

http://cssdeck.com/labs/dwq3x6vr (lưu ý: không bao gồm tiền tố)

ul {
  columns: 15em;
}

Một giải pháp khả thi là sử dụng justify-content: flex-start;trên .gridthùng chứa, hạn chế kích thước đối với con của nó và lề trên các phần tử con thích hợp - tùy thuộc vào số lượng cột mong muốn.

Đối với lưới 3 cột, CSS cơ bản sẽ trông như thế này:

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

Đó là một giải pháp không hoàn hảo, nhưng nó hoạt động.

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

Tôi biết có nhiều câu trả lời ở đây nhưng .. Cách đơn giản nhất để thực hiện việc này là gridthay vì flexvà grid template columnsvới repeatvà auto fills, nơi bạn phải đặt số pixel mà bạn đã cung cấp cho mỗi thành phần, 100pxtừ mã đoạn trích của bạn.

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

Đúng.! Chúng tôi có thể nhưng với một số truy vấn phương tiện & Tối đa không có cột nào được xác định trước .

Ở đây đang sử dụng 4 cột. Kiểm tra mã của tôi:

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

CHÚ THÍCH
1) Không cần tạo div con. Nó có thể là bất kỳ thẻ nào khác như 'img' r bất cứ điều gì bạn muốn ..
2) Nếu bạn muốn nhiều cột hơn điều chỉnh các truy vấn phương tiện và các cột no.of tối đa.

Nếu bạn muốn một lưới có một khoảng trống giữa các mục và các mục bắt đầu mà không có không gian ban đầu thì giải pháp đơn giản này hoạt động:

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

Nếu bạn muốn không gian 5px ban đầu thì chỉ cần loại bỏ lề âm :) Đơn giản.

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

Câu trả lời được chấp nhận, trong khi tốt, nó khiến không có khoảng cách giữa các thành phần trên hàng thứ hai ..

Nếu bạn muốn căn chỉnh mục cuối cùng vào lưới, hãy sử dụng mã sau:

Lưới container

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

Mục trong lưới

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

}

Mẹo nhỏ là đặt chiều rộng tối đa của mục bằng với chiều rộng tối đa của .card-lưới: sau.

Bản demo trực tiếp trên Codepen

Có thể sử dụng "flex-start" và thêm lề bằng tay. Nó đòi hỏi một số hack toán học nhưng chắc chắn dễ thực hiện và làm cho nó dễ sử dụng với bộ tiền xử lý CSS như LESS.

Xem ví dụ mixin LESS này:

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

Và sau đó nó có thể dễ dàng được sử dụng để hiển thị bố cục lưới đáp ứng:

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

Đây là một ví dụ về

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

Vấn đề này đã được giải quyết cho tôi bằng cách sử dụng lưới CSS,

Giải pháp này chỉ có thể áp dụng nếu bạn đang sửa số lượng cột tức là không. các yếu tố để hiển thị trong một hàng

-> sử dụng lưới nhưng không chỉ định số lượng hàng, vì số phần tử tăng nó kết thúc thành các cột và thêm các hàng động, tôi đã chỉ định ba cột trong ví dụ này

-> bạn không phải đưa ra bất kỳ vị trí nào cho con / tế bào của bạn, vì nó sẽ khiến nó sửa chữa, điều mà chúng tôi không muốn.

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

Phiên bản này là cách tốt nhất cho các khối có chiều rộng cố định:

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

Trong các trường hợp khác - phiên bản của bộ đệm

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>

Có một cách không có flexbox, mặc dù bạn cần phải đáp ứng các điều kiện sau. 1) Container có đệm. 2) Các mục có cùng kích thước và bạn biết chính xác có bao nhiêu bạn muốn trên mỗi dòng.

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

Phần đệm nhỏ hơn ở bên phải của container cho phép phần đệm thêm ở bên phải của mỗi mục danh sách. Giả sử các mục khác trong cùng cha mẹ với đối tượng danh sách được đệm bằng 0 5%, nó sẽ được xóa với chúng. Bạn cũng có thể điều chỉnh tỷ lệ phần trăm theo tỷ lệ phần trăm bạn muốn hoặc sử dụng tính toán giá trị px.

Tất nhiên, bạn có thể làm tương tự mà không cần phần đệm trên container bằng cách sử dụng nth-child (IE 9+) để xóa lề trên mỗi hộp thứ ba.

Sử dụng flexbox và một vài truy vấn phương tiện, tôi đã thực hiện công việc nhỏ này: http://codepen.io/una/pen/yNEGjv (hơi hack nhưng hoạt động được):

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

Tôi đã tạo ra một mixin SCSS cho nó.

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

Đây là liên kết codepen: http://codepen.io/diana_aceves/pen/KVGNZg

Bạn chỉ cần đặt chiều rộng của mục theo tỷ lệ phần trăm và số cột.

Tôi hy vọng điều này có thể giúp bạn.

Đây là một vài mixins scss.

Các mixin này giả định rằng bạn sẽ không sử dụng các plugin js như Isotope (chúng không tôn trọng thứ tự đánh dấu html, do đó gây rối với các quy tắc css nth).

Ngoài ra, bạn sẽ có thể tận dụng tối đa lợi thế của chúng, đặc biệt nếu bạn đang viết các điểm dừng đáp ứng của mình theo cách di động. Bạn lý tưởng sẽ sử dụng flexbox_grid () trên điểm dừng nhỏ hơn và flexbox_cell () trên các điểm dừng sau. flexbox_cell () sẽ đảm nhiệm việc đặt lại các lề đã giải quyết trước đó không còn được sử dụng trên các điểm dừng lớn hơn.

Và nhân tiện, miễn là bạn thiết lập chính xác các thuộc tính flex của người chứa, bạn cũng có thể chỉ sử dụng flexbox_cell () trên các mục, nếu bạn cần.

Đây là mã:

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

Sử dụng:

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

Rõ ràng, cuối cùng bạn sẽ đặt phần đệm / lề / chiều rộng và lề dưới của ô chứa và tương tự.

Hy vọng nó giúp!

Điều này là khá hacky, nhưng nó làm việc cho tôi. Tôi đã cố gắng để đạt được khoảng cách / lề nhất quán.

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

Có vẻ như không ai đề xuất giải pháp tăng trưởng flex cho mục cuối cùng. Ý tưởng là để vật phẩm flex cuối cùng của bạn có thể sử dụng flex-grow: 1.

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

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

Lưu ý: Giải pháp này không hoàn hảo, đặc biệt nếu bạn có các yếu tố trung tâm bên trong các mục flex của mình vì nó sẽ tập trung vào mục flex cuối cùng có thể rất lớn.

Đây là sự kết hợp của rất nhiều câu trả lời nhưng nó thực hiện chính xác những gì tôi cần - đó là, sắp xếp đứa trẻ cuối cùng trong một hộp đựng linh hoạt sang trái trong khi duy trì hành vi giữa không gian (trong trường hợp này là một cột ba cột bố trí).

Đây là đánh dấu:

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

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

Giả định:

• Bạn muốn bố trí lưới 4 cột với gói
• Số lượng vật phẩm không nhất thiết là bội số của 4

Đặt lề trái cho mỗi mục ngoại trừ mục 1, 5 và 9, v.v. Nếu lề trái là 10px thì mỗi hàng sẽ có lề 30px được phân phối giữa 4 mục. Chiều rộng phần trăm cho mục được tính như sau:

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

Đây là một cách giải quyết tốt cho các vấn đề liên quan đến hàng cuối cùng của 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>

Nếu bạn biết chiều rộng của khoảng trắng giữa các phần tử trong hàng và số lượng phần tử trong một hàng, điều này sẽ hoạt động:

Ví dụ: 3 phần tử liên tiếp, khoảng cách 10px giữa các phần tử

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

Chỉ cần sử dụng thủ thuật Jquery / Javascript để thêm một div trống:

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

Ôi trời, tôi nghĩ rằng tôi đã tìm thấy một giải pháp tốt với CSS tối thiểu và không có JS. Kiểm tra xem nó:

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>

Chìa khóa ở đây là hãy nhớ rằng những gì chúng ta đang cố gắng đạt được chính xác là những gì text-align: justify !

Các yếu tố trống trong HTML có ở đó để làm cho hàng cuối cùng hiển thị hoàn hảo mà không thay đổi giao diện, nhưng có thể không cần thiết cho những gì bạn đang cố gắng đạt được. Để cân bằng hoàn hảo trong mọi tình huống, bạn cần ít nhất x-4 phần tử trống, x là số phần tử cần hiển thị hoặc n-2, n là số cột bạn muốn hiển thị.

Chỉ cần thêm một vài mục giả mạo có cùng thuộc tính ngoại trừ chiều cao được đặt thành 0px đến cuối.

bạn muốn căn chỉnh

sử dụng align-content: flex-start;thay vìjustify-content: space-between;

Điều này kéo các mục cuối cùng sang trái và cũng phân bổ không gian đồng đều,

.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

giải pháp danAnderson KHÔNG phải là NĂNG ĐỘNG. NHANH CHÓNG !!

khi chiều rộng mục thay đổi từ 25 thành 28 dan và không có khoảng trống giữa các hình ảnh

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

năng động: https://codepen.io/anon/pen/aQggBW?editors=1100

đó là những gì tôi đã cố gắng nói Dans là hack .....

Tôi đã có thể làm điều đó với justify-content: space-betweentrên container