`flex: 0 0 25%` を使用して Flex アイテムに 1px のマージンを追加するにはどうすればよいですか?

フレックスを使用して 1px のマージンをフレックス項目に追加する: 0 0 25%

フレックス レイアウトを使用する場合、追加することが望ましい場合があります。項目を変更するには、1px などの小さなマージンを設定します。ただし、フレックスボックスでは本質的にマージンとして小数値を使用できません。

flex: 0 0 25% を使用して定義されたフレックス項目の場合、1px マージンを直接追加することはできません。これは、フレックス ベースが 25% に固定されており、マージンに使用できるスペースが残っていないためです。

解決策:

このシナリオで 1px のマージンを実現するには、次のようにします。 flex-grow プロパティを活用します:

flex: 1 0 22%;

• flex: 1: flex-grow を使用すると、指定されたフレックス ベースを超えて要素を拡張できます。
• 0: 要素がフレックス ベースを下回らないようにするため、flex-shrink は 0 に設定されます。
• 22%: フレックスベースは、各側で必要な 1px マージンを考慮して 22% に削減されます (2/11 = 片側あたり 0.19%、これを追加すると)最大 22% は 25% になります)。

フレックスベースを減らし、フレックスグローを増やすことにより、定義された比率を維持しながら要素に必要なマージンが確保されます。

例:

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

<div>

以上が`flex: 0 0 25%` を使用して Flex アイテムに 1px のマージンを追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。