CSS flex-shrink 属性の使用方法-フロントエンドQ&A-php.cn

CSS flex-shrink 属性の使用方法

藏色散人

リリース： 2019-05-27 16:26:59

オリジナル

3000 人が閲覧しました

css flex-shrink 属性は、flex 要素の収縮ルールを指定します。 flex 要素は、デフォルトの幅の合計がコンテナよりも大きい場合にのみ縮小され、その縮小サイズは flex-shrink の値に基づきます。

CSS flex-shrink 属性の使用方法

#CSS flex-shrink 属性の使用方法

#定義と使用法

flex-shrink 属性は、フレックス要素の収縮ルールを指定します。 flex 要素は、デフォルトの幅の合計がコンテナよりも大きい場合にのみ縮小され、その縮小サイズは flex-shrink の値に基づきます。

注: 要素がフレックスボックスオブジェクトの要素ではない場合、flex-shrink プロパティは効果がありません。

デフォルト値: 1

継承: いいえ

アニメーション化可能: はい。

バージョン: CSS3

JavaScript 構文:

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>

ログイン後にコピー

効果 :

CSS flex-shrink 属性の使用方法

分析例 :

フレックスシュリンクのデフォルト値は 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、これは、14px

B にほぼ等しいです。削除されたオーバーフローの量: (100*1/700)*100、14px

C にほぼ等しいです。削除されたオーバーフローの量: (100 *1 /700)*100、これは 14px

D にほぼ等しい削除されたオーバーフローの量: (100*2/700)*100、これは 28px

E にほぼ等しい削除されるオーバーフローの量: (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 サイトの他の関連記事を参照してください。