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

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

問題を理解する

あなたの状況では、フレックスボックスを使用して複数のボタンを一列に配置します。これらのボタンの幅を比例的に増加させて、元の幅の差を維持しながら残りの行スペースを埋めるようにしたいとします。ただし、各ボタンに flex: 1 を設定すると、すべてのボタンの幅が同じになります。

解決策: Flex: Auto に切り替える

目的を達成するための鍵結果は、flex-grow の正しい値を選択することにあります。 flex: 1 の代わりに、flex: auto を使用する必要があります。

Flex-Grow の仕組み

flex-grow は、以下に基づいてコンテナ内の空き領域を Flex アイテム間で分配します。 2 つの要素:

• 空き領域: row/column.
• Flex-basis: flex-grow を考慮する前のフレックス項目の初期サイズ。

説明

flex: 1 を使用する場合、flex-basis を 0 に設定し、flex-grow を 1 に設定することになります。これは、次のことを意味します。 flexbox は行内のすべてのスペースを空きスペースとして扱い、その内容に関係なくすべての項目に均等に分配されます。

一方、flex: auto は flex-basis を auto に設定し、空きスペースを配布する前にアイテムのコンテンツを変更します。これにより、残りの行スペースを埋めながら、項目が元のサイズの違いを維持することが保証されます。

例

コード内で、それぞれの flex: 1 を flex: auto に置き換えます。 button:

.button {
  flex: auto;  // Change from flex: 1
  display: inline-block;
  padding: 10px;
  color: #fff;
  text-align: center;
}

これにより、ボタンが元の幅に基づいて拡張され、要件が満たされます。

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