CSS で「flex: 1」は実際に何をするのでしょうか?

flex を理解する: 1

CSS の領域では、flex プロパティは要素のレイアウトと分布を制御する上で重要な役割を果たします。フレックスコンテナ。デフォルトでは、値 0 1 auto を想定し、それぞれ flex-grow、flex-shrink、および flex-basis に値を割り当てます。

ただし、一般的な使用法は flex: 1 が使用される場合に発生します。この省略表現は、その真の意図について疑問を引き起こします。

フレックス: 1 のデコード

この混乱は、フレックス: 1 の複数の解釈から生じています。これが 1 1 auto を意味すると考える人もいます。 、他の人は 1 0 auto を同等のものとして推測しています。

しかし、どちらの仮定も正しくありません。 flex: 1 は、実際には以下を表します:

• flex-grow: 1: 要素は、フレックス コンテナー内の使用可能なスペースに比例して拡張されます。コンテナが成長するにつれて、要素も成長します。
• flex-shrink: 1: 要素は、コンテナの収縮に応じて比例して縮小します。スペースが不足すると、要素はコンテナ内の他の要素を収容するために縮小します。
• flex-basis: 0: 要素には指定された開始サイズがないため、次の条件に基づいて動的にスペースが占有されます。利用可能な画面またはウィンドウのサイズ。コンテナまたはビューポートのサイズが変更されると、その寸法が調整されます。

本質的に、flex: 1 は、要素がフレックス コンテナ内の他の要素と均等にスペースを占めることを保証し、拡大と縮小の両方を維持できるようにします。バランスの取れた分布。このフレックス動作は、要素をさまざまな画面サイズに適応させる必要があるレスポンシブ デザインで一般的に使用され、さまざまなデバイス解像度で調和のとれたレイアウトを確保します。

以上がCSS で「flex: 1」は実際に何をするのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。