フレックスボックスおよびグリッドレイアウトで最後の項目の右マージンが折りたたまれるのはなぜですか?

フレックスボックスおよびグリッド レイアウトでのマージンの崩壊を解決する

フレックスボックス レイアウトまたはグリッド レイアウトを使用して水平リストに項目を配置すると、右マージンが崩れる問題が発生することがあります。最後の項目は折りたたまれています。これは、これらのレイアウトの固有の動作が原因で発生します。

潜在的な問題 #1: オーバーフロー プロパティの誤解

最初は、オーバーフロー プロパティがマージンの崩壊を引き起こしているように見えるかもしれません。 。ただし、オーバーフロー プロパティはコンテンツ領域にのみ適用され、パディングやマージンには適用されません。したがって、これが根本的な原因である可能性はありません。

潜在的な問題 2: ブラウザーの動作の不一致

特定の場合、特にフレックスボックスまたはグリッドの書式設定コンテキストの外側では、最後のマージンは保たれているようです。これは、ブラウザの動作に一貫性がなく、一部のコンテキストではオーバーフローがマージンやパディングにまで及ぶ可能性があることを示唆しています。

考えられる回避策:

• ネガティブを使用するマージン: 最後の項目の右側に負のマージンを追加して、端から強制的に遠ざけます。コンテナの。ただし、この方法はすべてのブラウザで一貫して機能するとは限りません。
• プレースホルダー項目を挿入: 最後の項目の後に空の項目 (コンテンツが表示されない) を作成して、折りたたまれたマージンを吸収します。これにより、視覚的にアクティブな要素が折りたたみの影響を受けなくなります。
• 新しいラッピング コンテナを作成します: 新しい子コンテナに項目を配置し、親の右側にマージンを追加します。容器。これにより、内部コンテナ内のマージンの崩壊が分離されます。

負のマージンを使用する例:

li:last-child {
  margin-right: -30px;
}

プレースホルダー項目を使用する例:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li class="placeholder"></li>
</ul>

新しいラッピングを使用した例コンテナ:

.container {
  margin-right: 30px;
}

.inner-container {
  display: flex;
  flex-direction: row;
}

以上がフレックスボックスおよびグリッドレイアウトで最後の項目の右マージンが折りたたまれるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。