Flexbox アイテムが不完全な線を中心に配置されるのを防ぐ方法

Flexbox アイテムが破線の中心に配置されないようにするにはどうすればよいですか?

Flexbox で、適合しないアイテムが入ったフレキシブル コンテナがある場合幅内で 1 行に均等に配置されると、その行上の残りの項目が中央に配置されます。しかし、完全な行の項目と同じように、残りの項目を左から開始して等間隔にしたい場合はどうすればよいでしょうか?

解決策: "ゴースト" 要素を使用する

JavaScript を使用せずに、不完全な行の残りのスペースを埋める空の要素 (「ゴースト」要素と呼ばれる) を作成できます。

たとえば、コンテナの潜在的な列の長さが 4 の場合、3 つのゴースト要素が必要になります。これらを HTML の末尾に追加できます:

<div class="card"></div>
<div class="card"></div>
<div class="card"></div>

更新された CSS:

.card:empty {
    width: 300px;
    box-shadow: none;
    margin: 2rem;
    padding-bottom: 0;
}

これにより、ゴースト要素が確実に同じスペースを占めるようになります。実際のカード。

擬似カードの使用要素

CSS 疑似要素を利用して、必要なゴースト要素の数を減らすこともできます。

.card:empty::before {
    content: "";
    width: 300px;
    box-shadow: none;
    margin: 2rem;
}

これにより、空のカードごとに疑似要素が作成され、その場所に配置されます。不完全なライン。 2 つのゴースト要素を 2 つの擬似要素に置き換えることにより、列長 4 に対して実際に必要なゴースト要素は 1 つだけになります。

コード例:

<div class="container">
  <div class="recipe-grid">

    <div class="card">
      <!-- Card content -->
    </div>

    <div class="card">
      <!-- Card content -->
    </div>

    <div class="card">
      <!-- Card content -->
    </div>

    <div class="card">
      <!-- Card content -->
    </div>

    <div class="card"></div> <!--- Ghost element -->

  </div>
</div>

を使用するゴースト要素や疑似要素を使用すると、Flexbox アイテムが不完全な線の中心に配置されるのを防ぎ、より視覚的に好ましい配置を確保できます。

以上がFlexbox アイテムが不完全な線を中心に配置されるのを防ぐ方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。