CSS の フレックスベース flex-basis は、アイテムが主軸上で占めるスペースの量を決定します。box 特定の CSS サイズ値を指定するか、親要素の占める割合を指定できます。デフォルト値は <!-- デモ-1 --> <div class="parent"> <div class="child1">100ピクセル</div> <div class="child2">200ピクセル</div> </div> <div class="parent"> <div class="child1">10%</div> <div class="child2">20%</div> </div> <div class="parent"> <div class="child1">30%</div> <div class="child2">自動</div> </div> <スタイル> 。親 { 幅: 500ピクセル; ディスプレイ: フレックス; 下部マージン: 15px; テキスト配置: 中央; 背景色: #eeeeee; } /** ピクセル値 */ .親:n番目の子(1) .子1 { フレックスベース: 100px; 背景色: #356969 } .親:n番目の子(1) .子2 { フレックスベース: 200px; 背景色: #369925; } /** パーセンテージ */ .親:n番目の子(2) .子1 { フレックスベース: 10%; 背景色: #356969 } .親:n番目の子(2) .子2 { フレックスベース: 20%; 背景色: #369925; } /** 自動*/ .親:n番目の子(3) .子1 { フレックスベース: 30%; 背景色: #356969 } .親:n番目の子(3) .子2 { flex-basis: 自動; 背景色: #369925; } </スタイル> フレックスグロー flex-grow は、フレックス コンテナーにスペースが残っている場合のアイテムのスケールを設定します (フレックス コンテナーのサイズからすべてのフレックス アイテムのサイズの合計を引いた値)。デフォルト値は 0 です (スペースが残っていても拡大されません)。すべてのアイテムの flex-grow プロパティ値が同じ場合、残りのスペースが均等に共有されます。それ以外の場合は、異なるプロパティ値によって定義された比率に従って分散されます。 たとえば、主軸の長さが600pxで、項目1が50px、項目2が100px、項目3が150pxを占める場合、残りのスペースは次のようになります: 600px - (50px + 100px + 150px) = 300px 各項目の <!-- デモ-2 --> <div class="parent"> <div class="child1">50ピクセル + 100ピクセル</div> <div class="child2">100ピクセル + 100ピクセル</div> <div class="child3">150ピクセル + 100ピクセル</div> </div> <スタイル> 。親 { 幅: 600ピクセル; ディスプレイ: フレックス; テキスト配置: 中央; 色: #eee; } .child1 { フレックスベース: 50px; フレックス成長: 1; 背景色: #0066CC; } .child2 { フレックスベース: 100px; フレックス成長: 1; 背景色: #009900; } .child3 { フレックスベース: 150px; フレックス成長: 1; 背景色: #CC3300; } </スタイル> 各項目の flex-grow プロパティの値が同じではないと仮定します。たとえば、項目 1 が 1、項目 2 が 2、項目 3 が 3 の場合、それらに割り当てられる残りのスペースは次のようになります。 <!-- デモ-3 --> <div class="parent"> <div class="child1">50ピクセル + 50ピクセル</div> <div class="child2">100ピクセル + 100ピクセル</div> <div class="child3">150ピクセル + 150ピクセル</div> </div> <スタイル> 。親 { 幅: 600ピクセル; ディスプレイ: フレックス; テキスト配置: 中央; 色: #eee; } .child1 { フレックスベース: 50px; フレックス成長: 1; 背景色: #0066CC; } .child2 { フレックスベース: 100px; フレックス成長: 2; 背景色: #009900; } .child3 { フレックスベース: 150px; フレックス成長: 3; 背景色: #CC3300; } </スタイル> 属性値が小数の場合はどうなりますか?ここでは 2 つの状況があります。 <!-- デモ-4 --> <div class="parent"> <div class="child1">50ピクセル + 60ピクセル</div> <div class="child2">100ピクセル + 90ピクセル</div> <div class="child3">150ピクセル + 120ピクセル</div> </div> <スタイル> 。親 { 幅: 600ピクセル; ディスプレイ: フレックス; テキスト配置: 中央; 色: #eee; } .child1 { フレックスベース: 50px; フレックス成長: 0.2; 背景色: #0066CC; } .child2 { フレックスベース: 100px; フレックス成長: 0.3; 背景色: #009900; } .child3 { フレックスベース: 150px; フレックス成長: 0.4; 背景色: #CC3300; } フレックスシュリンク flex-shrink は、フレックス コンテナーに十分なスペースがない場合のアイテムの拡大率を設定します。デフォルト値は 1 です (十分なスペースがない場合、アイテムは縮小されます)。 flex-shrink の計算方法は、flex-grow とは少し異なります。フレックス アイテムがどれだけ縮小するかに影響する要素は 2 つあります。1 つは flex-shrink プロパティの値で、もう 1 つはフレックス アイテム自体のサイズです。これらは、それぞれの重みに応じて縮小します。例: 主軸の長さは600px、項目1は100px、項目2は300px、項目3は500pxを占め、各項目の <!-- デモ-5 --> <div class="parent"> <div class="child1">100ピクセル - 15ピクセル</div> <div class="child2">300ピクセル - 135ピクセル</div> <div class="child3">500ピクセル - 150ピクセル</div> </div> <スタイル> 。親 { 幅: 600ピクセル; ディスプレイ: フレックス; テキスト配置: 中央; 色: #eee; } .child1 { フレックスベース: 100px; フレックスシュリンク: 1; 背景色: #0066CC; } .child2 { フレックスベース: 300px; フレックス収縮: 3; 背景色: #009900; } .child3 { フレックスベース: 500px; フレックス収縮: 2; 背景色: #CC3300; } </スタイル> 同様に、flex-shrink の値が小数の場合、次の 2 つのケースがあります。 <!-- デモ-6 --> <div class="parent"> <div class="child1">100ピクセル - 9ピクセル</div> <div class="child2">300ピクセル - 135ピクセル</div> <div class="child3">500ピクセル - 90ピクセル</div> </div> <スタイル> 。親 { 幅: 600ピクセル; ディスプレイ: フレックス; テキスト配置: 中央; 色: #eee; } .child1 { フレックスベース: 100px; フレックス収縮: 0.1; 背景色: #0066CC; } .child2 { フレックスベース: 300px; フレックス収縮: 0.3; 背景色: #009900; } .child3 { フレックスベース: 500px; フレックス収縮: 0.2; 背景色: #CC3300; } </スタイル> オーバーフロー スペースの一部のみが縮小されるため、div 内の要素の合計幅は実際には div の幅を超えます。 上記は、フレックスレイアウトにおけるflex-growとflex-shrinkの計算方法についての簡単な紹介です。 このブログのコードはGithubに同期されています 参考文献: 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: HTML4とHTML5の違い: 入力にフォーカス実装コードを追加する方法
Samba サービスでも NFS サービスでも、サーバーの起動時にリモート共有リソースが自動的にマ...
私は最近、ユーザー操作を元に戻す、またはやり直す機能を備えたビジュアル操作プラットフォームを開発して...
この記事の例では、WeChatアプレットの検索ボックス機能を実装するための具体的なコードを参考までに...
目次1分でgithub+Jekyllブログにトラフィック機能を追加する1. ジェクルとは何か1. J...
目次すべてのストレージエンジンを表示InnoDB ストレージ エンジンMyISAM ストレージエンジ...
目次序文vue-i18nをインストールするロケールの設定getLangs.js の実装i18nインス...
具体的なupgradeスクリプトは次のとおりです。インデックスを動的に削除する アップグレードが存在...
目次序文1. 公式サイトからMySQL 8.0.22をダウンロードする2. 環境変数を設定する3. ...
目次概要関数シグネチャオプションパラメータ非厳密モード例外処理実用要約する概要ご存知のとおり、ES6...
目次1.スリープ機能2.タイムアウトを設定する3. 約束4. 非同期待機5. 1秒後に出力1、2秒後...
Iframe 使用状況の詳細な分析<iframe frameborder=0 width=17...
目次テレポートの目的テレポートの仕組みこの記事では、以下の内容を取り上げます。テレポートの目的テレポ...
目次1. カウンターの実装2. 成果を達成する1. カウンターの実装ページにカウンターを実装するだけ...
この記事では、CSS を使用して半透明の背景と不透明なテキストの効果を実現する方法の例を紹介します。...
プロジェクトドキュメントディレクトリDiv+CSS 命名規則 - 4 - Div+css 命名規則 ...