フレックスボックスで要素を最後の行の中央に配置するにはどうすればよいですか?

フレックスボックスを使用して要素を最後の行の中央に配置する方法

CSS グリッドを使用して複数の項目をレイアウトする場合、位置を揃えるのが難しい場合がありますそれらを一列に並べます。グリッドは主に列またはトラック内で項目を整列するように設計されているため、行全体で整列するのは困難です。

CSS グリッドが不適切な理由

CSS グリッドはトラックとセルのシステム。トラックは水平または垂直に実行されます。グリッド セル内に項目を配置する場合、その特定のセル内での配置を制御できます。ただし、複数のセルまたは行全体にわたって項目を整列させることは、交差するトラックによって妨げられます。

整列に Flexbox を使用する

行全体で項目を整列させるためのより適切なアプローチフレックスボックスを使用することです。フレックスボックスは、項目を 1 つの軸 (水平または垂直) に沿って配置するように特別に設計されており、配置をより詳細に制御できます。

フレックスボックスを使用して要素を最後の行の中央に配置するには、次の手順を適用します。

1. 項目をフレックス コンテナ内でラップします。
2. justify-content プロパティを center に設定して、項目を水平方向に整列させます。コンテナ。
3. flex プロパティを使用して、各項目の希望の幅と柔軟性を指定します。
4. すべての要素の box-sizing プロパティが border-box に設定されていることを確認し、要素にパディングとボーダーを含めます。全体の幅の計算。

コード例

以下のコードスニペットは、フレックスボックスを使用して最後の行の中央揃えを実現する方法を示しています:

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

説明

この例では:

• #container は、アイテムを複数にラップできるように flex-wrap:wrap を使用してフレックス コンテナとして設定されます。行。
• justify-content: center は、アイテムがコンテナ内で水平方向の中央に配置されるようにします。
• flex プロパティは、利用可能なスペースに基づいて各アイテムの幅を動的に計算するために使用されます。
• box-sizing の設定: border-box は、パディングとボーダーがアイテムの幅全体に含まれることを保証し、不均一を防ぎます。

フレックスボックスを使用すると、項目の数に関係なく、最後の行を中央揃えにして、レイアウトをより視覚的に魅力的にすることができます。

以上がフレックスボックスで要素を最後の行の中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。