イメージ ギャラリー内の Flex アイテム間の間隔を 1 ピクセルにするにはどうすればよいですか?

マージンのあるイメージ ギャラリー フレックス項目の間隔を調整する方法

フレックスボックス レイアウトでは、フレックス値が「0 0 25%」の項目幅は固定されており、縮んだり伸びたりしません。グリッド状の構造を維持しながらこれらの項目間にスペースを追加するには、マージンを適用できます。ただし、1% のマージンを適用すると、ギャップが大きすぎる可能性があります。

1 ピクセルのマージンを実現するには、フレックス値「1 0 22%」を使用します。これにより、フレックスベーシスが 22% に設定され、1 行に 4 つの項目のみが存在することが保証されます。 flex-grow 値は 1 に設定されており、項目が拡大してマージンによって残された残りのスペースを埋めることができます。これにより、項目間にわずか 1 ピクセルの隙間が生じます。

#foto-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 10px;
}

.foto {
  flex: 1 0 22%;
  min-height: 50px;
  margin: 1px;
  background-color: red;
}

以上がイメージ ギャラリー内の Flex アイテム間の間隔を 1 ピクセルにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。