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

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

HTML と CSS では、柔軟で動的なレイアウトを簡単に作成できるため、Flexbox を使用するのが一般的です。ただし、特定のシナリオでは、コンテナ全体の幅が変わっても相対的な幅を維持しながら、フレックス アイテムを元のサイズに比例して拡張することが必要な場合があります。

一般的な Flexbox セットアップでは、次のように flex を使用します。 1 を指定すると、初期サイズに関係なく、すべてのアイテムが均等に拡張されます。ただし、このアプローチでは、すべての項目の幅が同じになります。これを解決するには、flex-basis プロパティを利用できます。

Flex-Basis および Flex-grow

flex-basis は、フレックス項目の初期幅を定義します。デフォルトでは auto の値が取られます。これは、アイテムのコンテンツのサイズに合わせて調整されることを意味します。 flex-grow と組み合わせると、コンテナ内の余分なスペースをフレックス項目間でどのように分配するかを制御できます。

flex-basis: auto を使用すると、flex-grow は、余分な スペースのみを分配します。アイテムのコンテンツが占めるスペース。これにより、項目は元のサイズに比例して拡大されます。

例: ボタンの幅の調整

幅が異なるボタンの行を考えてみましょう。次の CSS を使用すると、すべてのボタンが相対的なサイズを維持しながら、使用可能なスペースを埋めるように拡張されます:

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

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

または、次の省略表記を使用することもできます:

.button {
  flex: 1 1 auto;
}

結論

flex-basis と flex-grow の間の相互作用を理解することで、flex 項目を元のサイズに比例して拡張することができます。それぞれの幅を尊重しながら。このアプローチにより、動的レイアウトとレスポンシブ デザインの柔軟性が向上します。

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