「flex: 0 0 25%」を使用してフレックスボックス項目に 1 ピクセルのマージンを追加するにはどうすればよいですか?

指定されたフレックス: 0 0 25% に 1 ピクセルのマージンを追加する方法はありますか?

フレックスボックスに 1 ピクセルのマージンを追加するには要素を flex: 0 0 25% に設定し、flex プロパティを flex: 1 0 に調整します。 22%。これにより、要素の flex-basis が 22% に設定され (1 行あたり 4 つの要素が許可されます)、要素が 1px のマージンを介して拡張して残りのスペースを埋めることができるようになります (flex-grow は 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;
}

<div>

この変更により、必要な値を維持しながら、フレックス項目間に 1 ピクセルのマージンが有効になります。レイアウト。

以上が「flex: 0 0 25%」を使用してフレックスボックス項目に 1 ピクセルのマージンを追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。