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の違い: 入力にフォーカス実装コードを追加する方法
目次必要:機能ポイントレンダリング実装のアイデア具体的なコード(react\taro3.0)特定のコ...
最初のステップはTypeScriptをグローバルにインストールすることですnpmを使用してインストー...
1. 背景ボタンは非常によく使われており、Element のボタン機能は非常に包括的です。この記事で...
書き方1: sas_order_supply_month_pay セットを更新 RECEIVE_TI...
月曜日から日曜日の時間形式の変換(Y --- 年 M --- 月 D--- 日) : : : : :...
1. 背景1. フロントエンドはvue + vuex + socket.io-clientを使用しま...
クラスを見るとき、どのような情報を得たいですか?このクラスはどこで使用され、その機能は何ですか?この...
複数行のテキストがオーバーフローすると省略記号が表示されますこの記事では 2 つの方法を推奨します。...
みなさんこんにちは。今日はカルーセルの実装についてお話しします。私が作成したカルーセルの効果は次のと...
前回の記事では、openssl を使用して無料の証明書を生成した後、この証明書を使用してローカル ノ...
React では、this.state を使用して状態を直接変更しても、コンポーネントは再レンダリン...
proxy_intercept_errors と recursive_error_pages を使...
JavaScript での HTML (選択オプション) の詳細な説明1. 基本的な理解:コードをコ...
Nexus は RestApi を提供していますが、一部の API はまだ Groovy と組み合わ...
1. オーバーフローOverflow はオーバーフロー(コンテナ)です。コンテンツがコンテナを越える...