「justify-content: space-between」を使用してフレックスボックス グリッドの最後の行を均等に配置するにはどうすればよいですか?

フレックス ボックス: 最後の行をグリッドに揃える

フレックス ボックス レイアウトでは、最後の行の項目を他の行と揃えるのが難しい場合があります。 justify-content: space-between; を使用すると、グリッドのサイズを調整すると配置が狂う可能性があります。

この問題を解決するために、シンプルで洗練された解決策が登場しました:

::after

残りの部分を自動入力する ::after 疑似要素を追加しますspace:

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

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

仕組み:

::after 擬似要素は、グリッド内の空のスペースを埋める仮想要素を作成します。 flex: auto; を与えると、フィットするように自動的に調整されます。したがって、最後の行の項目は、グリッド サイズに関係なく、HTML 構造を変更することなくシームレスに配置されます。

ライブ デモンストレーションについては、ここで提供されている CodePen の例を参照してください: http://codepen.io/DanAndreasson/pen /ZQXLXj

以上が「justify-content: space-between」を使用してフレックスボックス グリッドの最後の行を均等に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。