フレックスボックス：最後の行をグリッドに揃えます

私は次のようなコンテナを備えたシンプルなフレックスボックスのレイアウトを持っています：

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

1つの手法は、高さが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>

将来的には、これを複数のを使用して実現できるようになる可能性があります::after(n)。

他のポスターが述べたように-フレックスボックスで最後の行を左揃えするきれいな方法はありません（少なくとも現在の仕様に従って）

しかし、それだけの価値がある場合：CSSグリッドレイアウトモジュールを使用すると、これは驚くほど簡単に作成できます。

基本的に、関連するコードは次のようになります。

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-fit- 0に空のトラックが折りたたまれた（1列レイアウト） -アイテムが残りのスペースを占有するように膨張させる。これは正当化「空間との間に生じます'グリッドに行が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デモ（サイズを変更して効果を確認）

追加のマークアップなし::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を使用することです。repeatauto fills100px

.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」のような他のタグでもかまいません
。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.
}

最初の5ピクセルのスペースが必要な場合は、負のマージンを削除してください:)シンプル

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

受け入れられた答えは、良いことですが、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のライブデモ

「フレックススタート」を使用して、マージンを手動で追加することが可能です。数学的なハッキングが必要ですが、間違いなく簡単で、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グリッドを使用して解決されました。

このソリューションは、固定数の列がある場合にのみ適用できます。単一行に表示する要素の数

->グリッドを使用しますが、行数を指定しません。要素の数が増えると、列に折り返されて行が動的に追加されるため、この例では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>

フレックスボックスを使用しない方法もありますが、次の条件を満たす必要があります。1）コンテナにはパディングがあります。2）アイテムのサイズは同じで、1行にいくつ必要かが正確にわかります。

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

コンテナーの右側にある小さなパディングにより、各リストアイテムの右側に追加のパディングができます。リストオブジェクトと同じ親の他のアイテムが0 5％で埋め込まれていると仮定すると、それらはフラッシュされます。また、パーセンテージを必要なマージンに調整したり、px値の計算を使用したりすることもできます。

もちろん、nth-child（IE 9+）を使用して3つおきのボックスのマージンを削除することにより、コンテナーにパディングなしで同じことを行うことができます。

フレックスボックスといくつかのメディアクエリを使用して、私はこの小さな回避策を作成しました：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;
    }
  }
}

これはcodepenリンクです：http ://codepen.io/diana_aceves/pen/KVGNZg

アイテムの幅をパーセントと列数で設定するだけです。

これがお役に立てば幸いです。

これがscssミックスインの別のカップルです。

これらのミックスインは、Isotopeのようなjsプラグインを使用しないことを前提としています（これらはHTMLマークアップの順序を尊重しないため、CSSのn番目のルールを変更します）。

また、特にモバイルファーストでレスポンシブブレークポイントを記述している場合は、それらを最大限に活用できます。理想的には、小さいブレークポイントで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アイテムがflex-growを使用して可能なすべての場所を占めるようにすることです：1。

.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

これは、フレックスボックスの最後の行に関連する問題に対する適切な回避策です。

.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

動的： https //codepen.io/anon/pen/aQggBW?editors=1100

それが私が言おうとしていたことです。ダンはハッキーです.....

justify-content: space-betweenコンテナの上でそれを行うことができました