1. flex-grow、flex-shrink、flex-basis プロパティ flex-grow: 残りのスペースをどのように分割するかを定義します。デフォルト値は 0 で、残りのスペースがある場合は拡大されないことを意味します。 例: <div class="flex-attr"> <div class="item-1 ピンク"> <span>1 2 3 4 5 6 7 8 9</span> </div> <div class="item-2 スカイブルー"> <span>1 2 3 4 5 6 7 8 9</span> </div> <div class="item-3 グレー"> <span>1 2 3 4 5 6 7 8 9</span> </div> </div> CSSコード: .flex属性{ 下部マージン: 600px; 幅: 580ピクセル; ディスプレイ: フレックス; } .item-1 { 幅: 100ピクセル; フレックス成長: 1; フレックスシュリンク: 1; } .item-2 { 幅: 100ピクセル; フレックス成長: 2; フレックス収縮: 2; } .item-3 { 幅: 200ピクセル; } 。ピンク { 背景色: ピンク; } .スカイブルー{ 背景色: スカイブルー; } .グレー{ 背景色: グレー; } 親要素 div.flex-attr の幅が 3 つの子要素の幅より大きい場合、3 つの子要素の幅が拡大されます。 3 番目の子要素の flex-grow はデフォルトで 0 になっており拡大しないため、最初の 2 つの子要素の幅のみが拡大され、拡大率は 1:2 になります。 この例では、親要素の幅は 580px に設定されています。計算すると、親要素の幅は 3 つの子要素の幅より 180px 大きくなります。拡大率によると、div.item-1 の幅は 180 (1/3) = 60px 拡大され、div.item-2 の幅は 180 (2/3) = 120px 拡大されます。したがって、次の図に示すように、3 つの子要素の最終的な幅は 160px、220px、200px になります。 親要素 div.flex-attr の幅が 3 つの子要素の幅より小さい場合、3 つの子要素の幅は縮小されます。縮小率は、子要素の幅の比率 * flex-shrink 属性の比率です。たとえば、3 つのサブ要素の幅の比率が 1:1:2 で、flex-shrink 属性の比率が 1:2:1 (3 番目のサブ要素のデフォルトの flex-shrink は 1) の場合、縮小率は 1:2:2 になります。 この例では、親要素の幅は 320px に設定されています。計算により、3 つの子要素の幅は親要素より 80px 広くなります。縮小率によると、div.item-1 の幅は 80 (1/5) = 16px 縮小され、div.item-2 と div.item-3 の幅は両方とも 80 (2/5) = 32px 縮小されます。したがって、3 つの子要素の最終的な幅は、次の図に示すように、84px、68px、168px になります。 2. 9グリッドレイアウト 1) フレックスの使用 HTMLコード: <div class="squ-4"> <div class="squ-inner flex"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> </div> </div> CSSコード: .squ-4 { 位置: 相対的; 幅: 100%; 高さ: 0; padding-bottom: 100%; /* パディングのパーセンテージは親要素の幅を基準に計算されます*/ 下部マージン: 30px; } .squ-4 .squ-inner { 位置: 絶対; 上: 0; 左: 0; 幅: 100%; height: 100%; /* 親要素のコンテナを埋めると、幅と高さは常に等しくなります*/ } .squ-4 .squ-inner>div { 幅: calc(98% / 3); 高さ: calc(98% / 3); 右マージン: 1%; 下部マージン: 1%; オーバーフロー: 非表示; } .squ-4 .flex { ディスプレイ: フレックス; flex-wrap: ラップ; } .flex>div { フレックス成長: 1; 背景色: スカイブルー; テキスト配置: 中央; 色: #fff; フォントサイズ: 50px; 行の高さ: 2; } .flex>div:n番目の型(3n) { 右マージン: 0; } .flex>div:n番目の型(n+7) { 下マージン: 0; } ここで注目すべきは、各グリッドの幅と高さを等しくするために、親要素の 2 つのレイヤーが div.item の周りにラップされていることです。最も外側の div.squ-4 では、height: 0 と padding-bottom: 100% を使用しています。パディングのパーセンテージは親要素の幅を基準に計算されるため、div.squ-inner 要素の width: 100% と height: 100% を設定すると、要素の幅と高さが常に等しくなります。 2) グリッドの使用 HTMLコード: <div class="squ-5"> <div class="squ-inner"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> </div> </div> CSSコード: .squ-5 { 位置: 相対的; 上: 0; 左: 0; 高さ: 0; パディング下部: 100%; } .squ-5 .squ-inner { 位置: 絶対; 上: 0; 左: 0; 幅: 100%; 高さ: 100%; 表示: グリッド; グリッドテンプレート列: repeat(3, 1fr); グリッドテンプレート行: repeat(3, 1fr); グリッド自動フロー: 行; } .squ-5 .item { 背景色: ピンク; 境界線: 1px 実線 #fff; } 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: http:// の代わりに // を使用する利点は何ですか (アダプティブ https)
>>: MySQL pt-slave-restart ツールの使い方の紹介
1. はじめにMySQL グループ レプリケーション (略して MGR) は文字通り MySQL グ...
jQuery 入門jQuery ライブラリは、簡単なマークアップ行を使用して Web ページに追加で...
秘密鍵を開かずにリモート サーバーのデータベースに接続するのは非常に便利です。新しい接続でデータを入...
目次導入1. MySQLデータベースの全体的なアーキテクチャSQL インターフェースパーサーオプティ...
1. はじめに周知のように、データベース ミドルウェアの読み取り/書き込み分離のアプリケーション シ...
テンプレート 1: ログイン.vue <テンプレート> <p class=&quo...
目次SQL ログを表示するにはどうすればいいですか? ? SpringMVC でのパラメータ渡しの説...
解決すべき問題主にコンポーネント間のクロスレベル通信用なぜディスパッチとブロードキャストを自分で実装...
この記事では、参考までに、簡単な計算機を実装するためのJavaScriptの具体的なコードを紹介しま...
序文数日前、偶然、コーナーの四角形が欠落している機能に遭遇しました。最初に頭に浮かんだのは、必要な場...
1. MySQLをダウンロードするMySQL 公式 Web サイトにログインし、MSI インストー...
操作要素の詳細については、前回の記事を参照してください。JavaScript WebAPI、DOM、...
Taobao のウェブページはインポートを使用していますが、多くのウェブサイトはリンクを使用していま...
MySQL ユーザーと権限MySQL には、MySQL と呼ばれるシステムに付属するデータベースがあ...
目次1. 概要2. JSON基本ツール3. JSONパス式4. JSONを検索して変更する序文:長い...