一般的なアプリケーションシナリオ 現在のアプリのインターフェースは基本的に同じであり、グリッドレイアウトはすべてのアプリに必須のものとなっています。 境界線付き、「機能ナビゲーション」ページでよく使用されます ボーダーレス、ホームページのカテゴリでよく使用される 設計目標 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 外部検証ロードバランシングが機能しない場合の解決策
基本的にすべてのeコマースプロジェクトにはショッピングカートの機能があります。これはreact-na...
1. Oracle をインストールします。インターネット上には Oracle のインストール手順が多...
この記事では、MySQL のスロー クエリ操作について例を挙げて説明します。ご参考までに、詳細は以下...
<br />原文: http://andymao.com/andy/post/104.h...
目次1. ディレクティブカスタムディレクティブ2. ミックスイン3. 継承を拡張する4. 提供して注...
今日は、データ バックアップに関連するいくつかの点について調べ、MySQL データ バックアップに関...
ファイルの保存とアクセスを容易にするために、FTPサービスが特別に構築されています。 FTP サーバ...
この記事では、mysqld プロセスをシャットダウンするプロセスと、MySQL インスタンスを安全か...
RocketMQ は、Alibaba が設計した分散型のキューベースのメッセージング ミドルウェア...
序文:前回の記事では、注意深い学生であれば発見できたかもしれない DDL ステートメントの使用法を中...
各浮動小数点型のストレージ サイズと範囲は、次の表に示されています。タイプサイズ範囲(符号付き)範囲...
はじめに: この記事ではreact-native-cliで作成したサンプル プロジェクト (Andr...
Ubuntu は比較的人気のある Linux デスクトップ システムです。最近、Ubuntu 20....
目次序文ブラウザコンパイル版ローカルプリコンパイルバージョン要約する序文vue3サンドボックスには主...
今日、私はクラスメートが問題を解決するのを手伝いました - Tomcat の起動が非常に遅く、約 5...