플렉스 박스 : 마지막 행을 그리드에 정렬

다음과 같은 컨테이너가있는 간단한 플렉스 박스 레이아웃이 있습니다.

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

이제 마지막 행의 항목을 다른 항목과 정렬하고 싶습니다. justify-content: space-between;그리드의 너비와 높이를 조정할 수 있으므로 사용해야합니다.

현재는 다음과 같습니다

여기서 오른쪽 하단의 항목이 "중간 열"에 있어야합니다. 그것을 달성하는 가장 간단한 방법은 무엇입니까? 여기 에이 동작을 보여주는 작은 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>

::after공간을 자동으로 채우는을 추가하십시오 . HTML을 오염시킬 필요가 없습니다. 여기에 표시된 코드 펜이 있습니다 : http://codepen.io/DanAndreasson/pen/ZQXLXj

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

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

한 가지 기술은 높이가 0 인 여러 개의 추가 요소 (행에있을 것으로 예상되는 최대 요소 수)를 삽입하는 것입니다. 공간은 여전히 ​​나뉘어 있지만 불필요한 행은 무너집니다.

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>

앞으로는 multiple을 사용하여이를 달성 할 수 있습니다 ::after(n).

다른 포스터에서 언급했듯이 (최소한 현재 사양에 따라) 마지막 행을 flexbox와 왼쪽으로 정렬하는 확실한 방법은 없습니다.

그러나 가치있는 것에 대해 : CSS Grid Layout Module을 사용하면 다음과 같이 놀랍도록 쉽게 만들 수 있습니다.

기본적으로 관련 코드는 다음과 같이 요약됩니다.

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

1) 컨테이너 요소를 그리드 컨테이너로 만듭니다.

2) 너비가 100px 인 자동 열로 그리드를 설정하십시오. (사용상의주의 자동 채우기 에 나란히 놓이는으로 ( auto-fit0 빈 트랙을 붕괴 1 행 레이아웃에있는 () - -. 남은 공간을 차지하기 위해 확장 할 항목을 일으키는 이것은 정당화 '공간 사이 초래 그리드에 하나의 행만있는 경우 레이아웃은 우리의 경우 원하는 것이 아닙니다 ( 이 데모 를 확인하여 차이점을 확인하십시오).

3) 그리드 행과 열에 간격 / 홈통을 설정하십시오. 여기에는 '공간 간격'레이아웃이 필요하므로 간격이 필요한만큼 커지므로 실제로 간격이 최소 간격이됩니다.

4) 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 (효과를 보려면 크기 조정)

추가 태그가 없으면 ::after열 너비를 지정하여 추가 하면됩니다.

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

다음과 같은 HTML로 :

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

당신은 할 수 없습니다. Flexbox는 그리드 시스템이 아닙니다. 적어도을 사용하고 있지는 않지만 원하는 것을 수행하기위한 언어 구성이 없습니다 justify-content: space-between. Flexbox로 얻을 수있는 가장 가까운 것은 열 방향을 사용하는 것입니다. 열 방향을 명시 적으로 설정해야합니다.

http://cssdeck.com/labs/pvsn6t4z (참고 : 접두사는 포함되지 않음)

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

그러나 더 나은 지원을 제공하고 특정 높이를 설정할 필요가없는 열을 사용하는 것이 더 간단합니다.

http://cssdeck.com/labs/dwq3x6vr (참고 : 접두사는 포함되지 않음)

ul {
  columns: 15em;
}

가능한 솔루션을 사용하는 것입니다 justify-content: flex-start;온 .grid온 용기, 그 아이에 대한 크기 제한, 마진 적절한 열 원하는 수에 따라 - 자식 요소.

3 열 그리드의 경우 기본 CSS는 다음과 같습니다.

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

또 다른 불완전한 솔루션이지만 작동합니다.

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

나는 거기에 많은 해답이 여기지만 ..이 작업을 수행하는 가장 간단한 방법은 함께 알고 grid대신의 flex와 grid template columns와 repeat와 auto fills당신이 각 요소에 주어진 것을 픽셀의 수를 설정해야 할 경우, 100px당신의 코드 조각에서입니다.

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

예.! 우리는 할 수 있지만 일부 미디어 쿼리와 최대 열이 미리 정의되어 있지 않습니다 .

여기에 4 개의 열이 사용됩니다. 내 코드를 확인하십시오.

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

참고
1) 자식 div를 만들 필요가 없습니다. 'img'r과 같은 다른 태그 일 수도 있습니다.
2) 더 많은 열을 원할 경우 미디어 쿼리와 최대 열 수를 조정하십시오.

항목과 항목 사이에 약간의 공간이있는 그리드가 초기 공간없이 시작하려는 경우이 간단한 솔루션이 작동합니다.

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

초기 5px 공간을 원하면 음수 여백을 제거하십시오 :) 단순.

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

받아 들여지는 대답은 좋지만 두 번째 행의 요소 사이에 공백이 없습니다.

마지막 항목을 격자에 맞추려면 다음 코드를 사용하십시오.

그리드 컨테이너

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

그리드의 항목

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

}

요령은 아이템의 최대 너비를 .card-grid : after의 최대 너비와 동일하게 설정하는 것입니다.

Codepen의 라이브 데모

"flex-start"를 사용하고 여백을 수동으로 추가 할 수 있습니다. 수학 해킹이 필요하지만 확실히하기 쉽고 LESS와 같은 CSS 전처리 기와 함께 쉽게 사용할 수 있습니다.

예를 들어이 LESS 믹스 인을 참조하십시오.

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

그런 다음 반응 형 그리드 레이아웃을 표시하는 데 쉽게 사용할 수 있습니다.

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

다음은 예입니다

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

이 문제는 CSS 그리드를 사용하여 해결되었습니다.

이 솔루션은 수정 번호의 열이있는 경우에만 적용됩니다 (예 : no). 단일 행에 표시 할 요소 수

-> 그리드를 사용하지만 행 수를 지정하지 않은 경우 요소 수가 증가하면 열로 줄 바꿈하고 행을 동적으로 추가 하므로이 예제에서는 3 개의 열을 지정했습니다.

-> 당신은 우리가 원하지 않는 문제를 고칠 것이므로 자녀 / 세포에 어떤 입장을 제시 할 필요가 없습니다.

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

이 버전은 너비가 고정 된 블록에 가장 적합합니다.

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

다른 경우-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>

flexbox가없는 방법이 있지만 다음 조건을 충족해야합니다. 1) 용기에 패딩이 있습니다. 2) 항목의 크기가 같으며 한 줄에 원하는 수량을 정확하게 알고 있습니다.

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

컨테이너의 오른쪽에있는 작은 패딩은 각 목록 항목의 오른쪽에 추가 패딩을 허용합니다. 목록 개체와 동일한 부모에있는 다른 항목이 0 5 %로 채워져 있다고 가정하면 해당 항목과 동일하게됩니다. 원하는 비율로 백분율을 조정하거나 px 값 계산을 사용할 수도 있습니다.

물론 n 번째 자식 (IE 9+)을 사용하여 세 번째 상자마다 여백을 제거하면 컨테이너의 패딩 없이도 동일한 작업을 수행 할 수 있습니다.

인 flexbox 몇 미디어 쿼리를 사용하여, 나는이 작은 해결 방법 만든 : http://codepen.io/una/pen/yNEGjv (자사는 작품 해키 비트 만) :

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

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

이것은 코드 링크입니다 : http://codepen.io/diana_aceves/pen/KVGNZg

항목 너비를 백분율 및 열 수로 설정하면됩니다.

이것이 당신을 도울 수 있기를 바랍니다.

여기에 scss 믹스 인이 있습니다.

이 믹스 인은 Isotope와 같은 js 플러그인을 사용하지 않을 것이라고 가정합니다 (html 마크 업 순서를 존중하지 않으므로 CSS 규칙).

또한 반응 형 중단 점을 모바일 첫 번째 방식으로 작성하는 경우 특히 이점을 최대한 활용할 수 있습니다. 작은 중단 점에서는 flexbox_grid ()를 사용하고 다음 중단 점에서는 flexbox_cell ()을 사용하는 것이 이상적입니다. flexbox_cell ()은 더 큰 중단 점에서 더 이상 사용되지 않는 이전에 설정된 여백을 재설정합니다.

그리고 컨테이너의 flex 속성을 올바르게 설정하는 한 필요한 경우 항목에 flexbox_cell () 만 사용할 수도 있습니다.

코드는 다음과 같습니다.

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

용법:

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

분명히 컨테이너의 패딩 / 여백 / 너비 및 셀의 하단 여백 등을 설정하는 것은 사용자의 몫입니다.

그것이 도움이되기를 바랍니다!

이것은 꽤 해 키지 만 나에게 효과적입니다. 일정한 간격 / 여백을 얻으려고했습니다.

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

마지막 품목에서 플렉스 성장 솔루션을 제안한 사람이없는 것 같습니다. 아이디어는 flex-grow를 사용하여 가능한 모든 장소를 갖도록 마지막 flex 항목을 만드는 것입니다.

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

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

참고 :이 솔루션은 특히 플렉스 아이템 내부에 중심 요소가있을 경우 완벽하지는 않습니다.

이것은 많은 답변의 조합이지만 내가 필요로하는 것을 정확하게 수행합니다. 즉, 플렉스 컨테이너의 마지막 자식을 왼쪽으로 정렬하면서 간격 사이의 동작을 유지합니다 (이 경우 3 열입니다) 나열한 것).

마크 업은 다음과 같습니다.

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

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

가정 :

• 줄 바꿈으로 4 열 그리드 레이아웃을 원합니다.
• 항목 수는 반드시 4의 배수 일 필요는 없습니다

1, 5, 9 번째 항목을 제외한 모든 항목에 왼쪽 여백을 설정하십시오. 왼쪽 여백이 10px 인 경우 각 행에는 4 개 항목에 30px 여백이 분배됩니다. 항목의 백분율 너비는 다음과 같이 계산됩니다.

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

이것은 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>

행의 요소와 행의 요소 양 사이의 간격 너비를 알고 있으면 다음과 같이 작동합니다.

예 : 연속으로 3 개의 요소, 요소간에 10px 간격

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

Jquery / Javascript 트릭을 사용하여 빈 div를 추가하십시오.

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

오, 나는 최소한의 CSS로 JS가없는 좋은 해결책을 찾았다 고 생각합니다. 확인 해봐:

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>

여기서 핵심은 우리가 달성하려는 것이 정확히 무엇인가를 기억하는 것입니다 text-align: justify!

HTML의 빈 요소는 모양을 변경하지 않고 마지막 행을 완벽하게 표시하기 위해 존재하지만 달성하려는 목적으로 필요하지 않을 수 있습니다. 모든 상황에서 완벽한 균형을 유지하려면 최소한 x-4 개의 빈 요소 (x는 표시 할 요소 수) 또는 n-2 (n은 표시하려는 열 수)가 필요합니다.

높이가 0px로 설정된 것을 제외하고 동일한 속성을 가진 가짜 항목을 몇 개 추가하십시오.

정렬 하고 싶다

align-content: flex-start;대신에 사용justify-content: space-between;

이렇게하면 마지막 행을 왼쪽으로 가져오고 공간을 균일하게 분배합니다.

.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 솔루션은 동적이 아닙니다. PERİOD !!

항목 너비가 25에서 28로 바뀌었을 때 앤더슨이 이미지 사이의 공간에 실패한 경우

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

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

그게 ive가 말하려는 것입니다. dans는 해 키다 .....

나는 justify-content: space-between용기에 그것을 할 수 있었다