flex-grow、flex-shrink、flex-basis、9グリッドレイアウトを理解する

flex-grow、flex-shrink、flex-basis、9グリッドレイアウトを理解する

1. flex-grow、flex-shrink、flex-basis プロパティ

flex-grow: 残りのスペースをどのように分割するかを定義します。デフォルト値は 0 で、残りのスペースがある場合は拡大されないことを意味します。

flex-shrink: アイテムの縮小率を定義します。 flex-shrink のデフォルト値は 1 で、flex-shrink の値が 0 の場合、スケーリングは行われません。

flex-basis: アイテムが占めるスピンドルのスペースの量を定義します。ブラウザはこのプロパティに基づいて、主軸上の余分なスペースまたは不足しているスペースの量を計算します。デフォルト値は auto で、プロジェクトの元のサイズになります。
flex-basis の優先度は width プロパティよりも高くなります。width プロパティのみが設定され、flex-basis が auto の場合、アイテムの元の長さは幅と等しくなります。width と flex-basis の両方が設定されている場合、アイテムの元の長さは flex-basis と等しくなります。

例:
HTMLコード:

<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 ツールの使い方の紹介

推薦する

MySQL 8.0.15 で MGR シングル マスターと複数スレーブを構成する方法

1. はじめにMySQL グループ レプリケーション (略して MGR) は文字通り MySQL グ...

jQueryは何に使われるのですか?jQueryは実際にはjsフレームワークです

jQuery 入門jQuery ライブラリは、簡単なマークアップ行を使用して Web ページに追加で...

Navicatを使用してクラウドサーバーデータベースにリモート接続する方法

秘密鍵を開かずにリモート サーバーのデータベースに接続するのは非常に便利です。新しい接続でデータを入...

MySQL InnoDB アーキテクチャの概要

目次導入1. MySQLデータベースの全体的なアーキテクチャSQL インターフェースパーサーオプティ...

MySQL フェイルオーバー ノート: アプリケーション対応設計の詳細な説明

1. はじめに周知のように、データベース ミドルウェアの読み取り/書き込み分離のアプリケーション シ...

Vue でログインと登録テンプレートを実装するためのサンプルコード

テンプレート 1: ログイン.vue <テンプレート> <p class=&quo...

SSM VUE Axios の詳細な説明

目次SQL ログを表示するにはどうすればいいですか? ? SpringMVC でのパラメータ渡しの説...

Vue のディスパッチとブロードキャストの自己実装の詳細説明 (ディスパッチとブロードキャスト)

解決すべき問題主にコンポーネント間のクロスレベル通信用なぜディスパッチとブロードキャストを自分で実装...

JavaScriptはシンプルな計算機能を実装します

この記事では、参考までに、簡単な計算機を実装するためのJavaScriptの具体的なコードを紹介しま...

CSS3は、欠けた角の長方形、折り畳まれた角の長方形、欠けた角の境界線を実装しています。

序文数日前、偶然、コーナーの四角形が欠落している機能に遭遇しました。最初に頭に浮かんだのは、必要な場...

MySQL 8.0.21.0 コミュニティ エディションのインストール チュートリアル (詳細な図解)

1. MySQLをダウンロードするMySQL 公式 Web サイトにログインし、MSI インストー...

JavaScript 操作要素の例

操作要素の詳細については、前回の記事を参照してください。JavaScript WebAPI、DOM、...

CSSをインポートする方法は何ですか?linkと@importの違いは何ですか?選択方法

Taobao のウェブページはインポートを使用していますが、多くのウェブサイトはリンクを使用していま...

MySQL ユーザーと権限、およびルートパスワードをクラックする方法の例

MySQL ユーザーと権限MySQL には、MySQL と呼ばれるシステムに付属するデータベースがあ...

MySQL 8.0はJSONを扱えるようになりました

目次1. 概要2. JSON基本ツール3. JSONパス式4. JSONを検索して変更する序文:長い...