レスポンシブ グリッド レイアウトの最後の行にのみ要素を中央揃えするにはどうすればよいですか?

要素を最後の行にセンタリングする: CSS グリッドとフレックスボックス

ジレンマ:
CSS グリッドを使用して項目を配置する場合等間隔のグリッドで、任意の数の要素を収容しながら、要素を最終行のみの中央に配置するにはどうすればよいですか? items?

CSS グリッドには適していません:
CSS グリッドは、交差するトラックが目的の効果を妨げるため、行または列全体に項目を配置するのには理想的ではありません。

代替: Flexbox
希望のセンタリングを実現するには、Flexbox の利用を検討してください。 justify-content: center を使用したフレックスボックス。これにより、項目が行の中央に水平に詰め込まれ、マージンによって項目が離されます。

メカニズム:
完全な行では、justify-content は効果がなく、項目が完全に配置されます。空き領域がなくても正当化されます。ただし、空き領域のある行 (つまり、最後の行) では、項目は

例:

CSS:

#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.item {
  flex: 0 0 calc(16.66% - 20px);
  background: teal;
  color: white;
  padding: 20px;
  margin: 10px;
}

* {
  box-sizing: border-box;
}

HTML:

<div>

結果:
付きこのアプローチでは、レイアウトはさまざまな項目数に対応したままでありながら、最終行の項目が中央に配置されます。

以上がレスポンシブ グリッド レイアウトの最後の行にのみ要素を中央揃えするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。