Flexbox アイテムを元のサイズに基づいて比例的に拡大するにはどうすればよいですか?

元のサイズに基づいて Flex-Grow アイテムを拡張する

Flexbox を使用して要素をスタイル設定する場合、コンテナ内の残りのスペースをアイテム間で分配することが望ましいです。ただし、デフォルトでは、flex-grow は初期サイズに関係なく、すべての項目に同じ幅を割り当てます。この差を維持するには、flex-grow を「1」ではなく「auto」に設定することを検討してください。

説明

Flex-grow は、使用可能な空き領域とフレックス ベースの 2 つのパラメータに基づいて動作します。空き領域とは、フレックス項目間で分散できるコンテナ内の残りの領域を指します。フレックス ベースは、配布前の各アイテムの初期サイズを決定します。

絶対サイズ設定 (フレックス: 1):

• フレックス ベースが 0 に設定されている場合、flex-grow は、利用可能なスペース全体を空きスペースとして扱います。
• これにより、すべてのスペースが比例して同じサイズになります。元のコンテンツに関係なく、アイテム。

相対サイズ設定 (flex: auto):

• flex-basis が auto (デフォルト) の場合、flex-grow は、各アイテムのコンテンツ サイズを考慮します。
• コンテナ内の残りのスペースのみが分配されます。

例:

幅が異なる 3 つのボタンについて考えます。それぞれの比例サイズを維持しながら、コンテナの残りの幅を埋めるようにしたいと考えています。

.row-flex {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.button {
  flex: auto;     // Relative sizing to maintain original proportions
  display: inline-block;
  padding: 10px;
  color: #fff;
  text-align: center;
}

flex-grow を auto に設定すると、ボタンは現在のサイズから比例して拡大し、使用可能なスペースを埋めます。初期サイズの違いを維持します。

以上がFlexbox アイテムを元のサイズに基づいて比例的に拡大するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。