一般的なアプリケーションシナリオ 現在のアプリのインターフェースは基本的に同じであり、グリッドレイアウトはすべてのアプリに必須のものとなっています。 境界線付き、「機能ナビゲーション」ページでよく使用されます ボーダーレス、ホームページのカテゴリでよく使用される 設計目標 scss 環境では、n グリッドは mixin を通じて実装され、「境界線の有無」と「各グリッドが正方形であるかどうか」をサポートできます。 @include grid(3, 3, true); // 3 x 3、境界線あり、各グリッドは正方形 @include grid(2, 5, false, false); // 2 x 5、境界線なし 最終結果 「パディング率」のヒント まず、正方形を実現するためのちょっとしたコツを説明します。一度読めば理解できるはずです。結論は次のとおりです。 デザインアイデア(SCSS かどうかは関係ありません)
したがって、HTML は次のようになります。 <!-- a-grid はフレックス コンテナであり、コンテンツを「水平方向/垂直方向に中央揃え」することが簡単になります --> <div class="a-grid"> <!-- a-grid__item は正方形を実現するためのスペースを占めるために使用されます --> <div class="a-grid__item"> <!-- item__content はコンテンツの実際のコンテナです--> <div class="item__content"> コンテンツ... </div> </div> </div> コード (scss) ここでは 3 つのことが行われます。
.a-グリッド{ ディスプレイ: フレックス; flex-wrap: ラップ; 幅: 100%; .a-グリッド__アイテム{ テキスト配置:中央; 位置:相対; >.item__content { ディスプレイ:フレックス フレックスフロー: 列; アイテムの位置を中央揃えにします。 コンテンツの中央揃え: 中央; } } } @mixin グリッド($行:3、$列:3、$hasBorder:false、$isSquare:true) { .a-grid を拡張します。 .a-グリッド__アイテム{ flex-basis: 100%/$column; @if($isSquare) { パディング下部: 100%/$column; 高さ: 0; } >.item__content { @if($isSquare) { 位置:絶対; 上:0;左:0;右:0;下:0; } } } @for $index 1 から (($row - 1) * $column + 1) まで { .a-grid__item:n番目の子(#{$index}) { @if($hasBorder) { 下境界線: 1px 実線 #eee; } } } @for $index 1 から $column まで { .a-grid__item:n番目の子(#{$column}n + #{$index}) { @if($hasBorder) { 右境界線: 1px 実線 #eee; } } } } 使用 // 3行3列の正方形グリッドを生成します。a-grid-3-3 { @include グリッド(3, 3, true); } // 2 行 5 列の境界のないグリッドを生成します。各グリッドの高さはコンテンツによって決まります。a-grid-2-5 { @include グリッド(2, 5, false, false); } 注意: nxm レイアウトを作成する場合は、@include grid(n, m) を使用した後、HTML に nxm に対応する DOM 構造を追加することを忘れないでください。 ファイナル 内容は非常にシンプルで、実際のデバイス上ではより細く見える「ヘアライン」の境界線に変更できるなど、最適化できる領域はまだ多くあります。 さて、今回はこれで終わりです。もっと良い実装方法があれば、ぜひメッセージを残してください。お読みいただきありがとうございました。 最近、CSS スタイル ライブラリを作成しています。目標はアプレットと互換性を持たせることです。興味のある人は誰でも試すことができます。これは、このレッスンに対応するソース コードです。 https://github.com/any86/3a.css/blob/develop/src/components/_grid.scss 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
>>: Docker Swarm 外部検証ロードバランシングが機能しない場合の解決策
序文ブラウザをどのようにズームしても、ボックス コンテナーの高さを常に 100% に保つ必要がある場...
このとき、overflow:auto;(コードがコンテナの境界を超えたときにスクロールボックスを表示...
execute、executeUpdate、executeQuery の違い (およびそれらの戻り値...
簡略化されたファイル サイズを変更し、サンプルをダウンロードします。ファイルをローカル コンピュータ...
序文最近、CentOS 7 で MySQL 5.7.23 をアップグレードする際に落とし穴を発見しま...
目次1. 集計クエリ1. COUNT関数2. SUM関数3. AVG関数4. MAX関数とMIN関数...
目次1. Maven 依存関係2. メニュー関連クラス1. メインメニュー2. サブメニュー3. S...
目次Vue.jsにおける属性とプロパティ値および関連する処理として属性とプロパティの概念属性とプロパ...
1.MySQL UPDATE JOIN構文MySQL では、UPDATE ステートメントでJOIN句...
弊社のネットワーク管理センターは管理センター兼サーバーとして機能します!各管理対象デバイスは、TCP...
正式な環境でアップグレードする場合は、データと重要な設定をバックアップしてください。アップグレードに...
目次質問: 1. 最初の試み2. 合理的な分析3. 問題解決(1) pthread_join()の使...
目次シーン紹介深い応答性トリガーゲッターDep.targetを探すゲッターセッター要約するシーン紹介...
この記事では、MySQL 最適化のヒントで重複したエントリを削除する方法を例を使って説明します。ご参...
VMware Tools は VMware 仮想マシンに付属するツールで、VirtualBox (...