flexの使い方と特徴を紹介

X この記事では、Flex の使用法と属性を紹介します

このアダプティブ 3 列ボックス

Rreee

赤 青

緑

Flex: Flex-Grow Flex-shrinch flex-basis|auto|initial|inherit

;

flex には主に 3 つの属性値があります

flex-grow 他のフレキシブル プロジェクトと比較してプロジェクトが拡張する量を指定します。

red

blue

green

<div class="flex">
  <div style="background-color:red;">红色</div>
  <div style="background-color:blue;">蓝色</div>  
  <div style="background-color:green;">绿色</div></div><style>.flex{ display: flex;}.flex div{border: 1px solid #000; flex:auto; height: 100px;}</style>

上記の例のように、親コンテナ

の幅が子要素の幅の合計よりも大きい場合にトリガーされます

flex が設定されているため - 基本は 100px

flex の幅は

400px

で、内部の 3 つの dom の合計の長さは 300px に設定されており、残りの幅は 100 です。

最初の子要素の拡張量: (1/(1+2+3))*100、これは 16px にほぼ等しくなります

2 番目の子要素の拡張量: (2 /(1+2+3))*100、これは 32px にほぼ等しい

3 番目のサブ要素の展開: (3/(1+2+3))*100それぞれ

にほぼ等しい

flex-shrink は、他の柔軟なアイテムと比較してアイテムが縮小する量を指定します。

赤

青

緑

上記の例のように、flex-basisが200pxに設定されているため、親コンテナの幅が子要素

の幅の合計より小さい場合にトリガーされます

flexの幅は

です400px、内部の 3 つの dom の合計幅の長さは

600px に設定され、残りの幅は 200px 減ります。

収縮量が設定されているため、200*1+200*2+20が必要となります0*3 =1200;

つまり、最初のサブコンテナの幅は200-(200*1/1200)*200となります。 =166px

つまり、2番目のサブコンテナの幅は200-(200*2/1200)*200=134pxとなります。

つまり、3番目のサブコンテナの幅は200-(200*3/1200)*200=100pxです

「flex」属性の「flex-basis」が 0 でない場合 (値が auto である場合を含み、この場合、flex ベース値はそれ自体のコンテンツの幅と等しくなります)、「 flex child" は、コンテナの残りのスペースを割り当てます (残りのスペースは、コンテナの幅から各アイテムの flex 基準値を引いたものに等しい)

「flex」属性の「flex-basis」が 0 に等しい場合、「flex」 「children」はコンテナのすべてのスペースを割り当てます（各項目のフレックス基準値が合計されて 0 に等しいため、残りのスペースはコンテナの幅から各項目のフレックス基準値を引いた値に等しくなります）。 、マイナス 0、そして最終的な残りのスペースの値はコンテナーの幅に等しい)、この機能を使用して各サブ項目に「flex: n」を定義し、コンテナーの合計幅を比例的に均等に分割することができます

薄緑

= サポート

• 赤
= サポートしない

• ピンク
= 部分的にサポート

値 IE基本サポート-ウェブキット-21.0+-ウェブキット-6.1+ 7.0+4.4+20.0+29.0+28.0+

Firefox	Chrome	Safari	Opera	iOS Safari	Androidブラウザ	Android Chrome
6. 4.0-20.0	6.0	15.0+		6.0-6.1	2.1-4.318.0-19.0		11.0+	22.0+
		-ウェブキット-	17.0+	-ウェブキット-		-ウェブキット-		9.0+ 9.0+

以上がflexの使い方と特徴を紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。