css flex-shrink 属性は、flex 要素の収縮ルールを指定します。 flex 要素は、デフォルトの幅の合計がコンテナよりも大きい場合にのみ縮小され、その縮小サイズは flex-shrink の値に基づきます。
#CSS flex-shrink 属性の使用方法
#定義と使用法
flex-shrink 属性は、フレックス要素の収縮ルールを指定します。 flex 要素は、デフォルトの幅の合計がコンテナよりも大きい場合にのみ縮小され、その縮小サイズは flex-shrink の値に基づきます。注: 要素がフレックスボックス オブジェクトの要素ではない場合、flex-shrink プロパティは効果がありません。
デフォルト値: 1継承: いいえアニメーション化可能: はい。 バージョン: CSS3JavaScript 構文:
object.style.flexShrink="5"
CSS 構文:
flex-shrink: number|initial|inherit;
プロパティ値
number アイテムが他の柔軟なアイテムと比較して縮小する量を指定する数値。デフォルト値は 1 です。 initial このプロパティをデフォルト値に設定します。 inherit このプロパティを親要素から継承します。例
A、B、C はフレックスシュリンク:1、D、E はフレックスシュリンク:2 に設定されます:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #content { display: flex; width: 500px; } #content div { flex-basis: 120px; border: 3px solid rgba(0,0,0,.2); } .box { flex-shrink: 1; } .box1 { flex-shrink: 2; } </style> </head> <body> <p>div 总宽度为 500px, flex-basic 为 120px。</p> <p>A, B, C 设置 flex-shrink:1。 D , E 设置为 flex-shrink:2</p> <p>D , E 宽度与 A, B, C 不同</p> <div id="content"> <div class="box" style="background-color:red;">A</div> <div class="box" style="background-color:lightblue;">B</div> <div class="box" style="background-color:yellow;">C</div> <div class="box1" style="background-color:brown;">D</div> <div class="box1" style="background-color:lightgreen;">E</div> </div> </body> </html>
分析例 :
フレックスシュリンクのデフォルト値は 1 です。この属性が明示的に定義されていない場合、スペースの縮小は、すべての要素を追加した後の比率を計算することによって自動的に実行されます。デフォルト値は 1 です。 この例では、A、B、および C はフレックス シュリンクを 1 として明示的に定義し、D および E はフレックス シュリンクを 2 として定義します。 したがって、残りのスペースは、次の 7 つの部分に分割されるように計算されます。 A、B、C が 1 シェアを占め、D と E が 2 シェアを占めます。つまり、1:1:1:2:2親コンテナが 500px として定義され、子コンテナが120px として定義されており、子コンテナを追加すると、親コンテナより 100px 多い 600px になります。次に、過剰な 100 ピクセルは、収縮率を介して A、B、C、D、および E によって消化される必要があるため、重み付き合成は 100*1 100*1 100*1 100*2 100*2=700px になります。 したがって、A、B、C、D、および E によって除去されるオーバーフロー量を計算できます。 A 除去されるオーバーフロー量: (100*1/700)* 100、これは、14pxB にほぼ等しいです。 削除されたオーバーフローの量: (100*1/700)*100、14pxC にほぼ等しいです。 削除されたオーバーフローの量: (100 *1 /700)*100、これは 14pxD にほぼ等しい 削除されたオーバーフローの量: (100*2/700)*100、これは 28pxE にほぼ等しい削除されるオーバーフローの量: (100*2/700)*100、これは 28px にほぼ等しい A、B、C、D、および E の実際の幅はそれぞれ: 120-14=106px , 120-14=106px, 120-14=106px, 120-28=92px, 120-28=92px, なお、この幅には枠線も含まれます。以上がCSS flex-shrink 属性の使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。