フレックススペース間のソリューションの最後の行の位置合わせの問題に

背景

一般的なグラフィックデザインのリスト、典型的には、その平均ピッチの中央に対する容器端部の東以下の製品リストの設計：

適応リストは、品物の数が数を置くのに十分な窓を入れて、各商品アイテムの平均の間の間隔時に、あります。各人のウィンドウは異なっていてもよく、したがって、各列の数やピッチが異なる参照するからです。

スキーム

この設計を考えて、我々は正当化、コンテンツのようなフレックス、フレックスくらい知って学んだ：私たちは自然に達成して、スペース間の効果を：

.flex { 
  リストスタイル：なし。
  マージン：0; 
  パディング：0; 
  ボックスサイズ：ボーダーボックス; 
  表示：フレックス。
  フレックスラップ：ラップ; 
  正当化-コンテンツ：スペースの間; 
} 
.demo1> .flex__item { 
  フレックス基準：200pxの。
  マージントップ：1rem。
  テキスト整列：センター; 
  ボックスサイズ：ボーダーボックス; 
} 

.demo1> .flex__item IMG { 
  幅：100％。
}

<ULクラス= "フレックスDEMO1"> 
  <LIクラス= "flex__item"> 
    <IMG SRC = "http://via.placeholder.com/100" /> 
    <P> 
      图片
    </ P> 
  </ LI> 
  <LIクラス= "flex__item"> 
    <IMG SRC = "http://via.placeholder.com/100" /> 
    <P> 
      图片
    </ P> 
  </ LI> 
  <LIクラス= "flex__item"> 
    <IMG SRC =」 http://via.placeholder.com/100" /> 
    <P> 
      图片
    </ P> 
  </ LI> 
  <LIクラス= "flex__item"> 
    <IMG SRC = "http://via.placeholder.com/100 "/> 
    <P> 
      图片
    </ P> 
  </ LI>  
  <LIクラス= "flex__item">
    <IMG SRC = "http://via.placeholder.com/100" />
    <P> 
      图片
    </ P> 
  </ LI> 
</ UL>

デモ：https://jsbin.com/yulevutodo/edit?html,css,output

問題

私たちは、魚が左に整列する必要があり、最後の行が間違っている、効果を参照してください。

あなたは何か良い解決策を持っている（私は、グリッドを使用したくないので、順番になど、互換性を確保するために）ですか？

何か良いプログラム、私が知らせることを望むならば、私は部分的なものにかかったので、私はプログラムを持っていますが、気持ちは常に最高ではない、私はあなたが最初に自分の考えを期待して、私の計画を見て、ありがとうございました！

：私はこの辺のことを計画しhttps://javascript.shop/2020/01/flex-space-between-last-row-alignment