フレックス項目を元のサイズに基づいて比例的に拡大するにはどうすればよいですか?

Flex アイテムを元のサイズに比例して拡張する

Flex アイテムが相対的な幅を維持しながら均一に拡張されるようにするには、flex から調整します: 1フレックスするには: 自動。このスイッチは、コンテンツ サイズを考慮してサイズ計算を変更します。

Flex-grow と Flex-basis について

Flex-grow は、名前が示すように、定義された値と利用可能な空き領域に基づいて項目のサイズを決定します。ただし、アイテムの初期サイズを決定するフレックス ベースの役割を考慮することが重要です。

相対サイズ設定と絶対サイズ設定

フレックス ベースが有効な場合0 に設定すると、flex-grow はすべてのスペースを配布用の空きスペースとして扱い、その結果、アイテムの幅が要素に関係なく等しい絶対的なサイズ設定になります。 content.

逆に、flex-basis が auto (デフォルト) の場合、空き領域を計算する前にコンテンツのサイズが考慮されます。これにより、相対的なサイジングが可能になり、余分なスペースのみが比例的に配分されます。

フレックス値の内訳

• flex: 1: flex-grow の短縮形: 1 (絶対サイズ設定)
• flex-grow: 1: 相対コンテンツ サイズと利用可能なスペースの両方を考慮したサイズ変更
• flex: auto: flex-grow: 1 / flex-shrink: 1 / flex-basis: auto と同等。これも相対的なサイズ設定です

flex:auto を採用すると、元のサイズ比率を維持しながら、行の残りの幅を満たすためにボタンのサイズが大きくなります。これにより、展開された場合でも、最も幅の広いボタンが他のボタンよりも幅広のままになります。

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