CSS3 フレックスレイアウトを使用して要素を均等に分散するサンプルコード

CSS3 フレックスレイアウトを使用して要素を均等に分散するサンプルコード

この記事では主に、CSS3 フレックスレイアウトを使用して要素を均等に配置する方法を紹介します。自分用にメモを残して皆さんと共有します。詳細は次のとおりです。

例1:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
    <title>フレックスレイアウト</title>
  <スタイル> 
    *{
      パディング:0;
      マージン:0;
    }
    本文、html{
      高さ:100vh;
      最小幅: 800px;
    } 
    。容器{
      ディスプレイ:フレックス;
      flex-wrap:ラップ;
      display: -webkit-flex; /* Safari */
    }
    .コンテナ>.アイテム{
      境界線: 1px 黒一色;
      フレックス:1; 
      高さ:100px;
      背景: #abcdef;
    }
  </スタイル>
</head>
<本文>
  <div class="コンテナ">  
    <div class="item"></div>
    <メインクラス="item"></メイン>
    <div class="item"></div>
  </div>
</本文>
</html>

例2:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
    <title>フレックスレイアウト</title>
  <スタイル> 
    *{
      パディング:0;
      マージン:0;
      ボックスのサイズ: 境界線ボックス;
    }
    本文、html{
      幅: 100%;
      高さ:100vh;
      最小幅: 800px;
      ディスプレイ:フレックス;
      display: -webkit-flex; /* Safari */
      コンテンツの中央揃え: 中央;
      アイテムの位置を中央揃えにします。
    } 
    。容器{
      幅: 300ピクセル;
      高さ: 300px;
      ディスプレイ:フレックス;
      display: -webkit-flex; /* Safari */
      flex-wrap: ラップ;
    }
    .コンテナ>.アイテム{
      フレックス:0 0 33.3%; 
      高さ:100px;
      背景: #abcdef;
      境界線: 1px 実線の赤;
    }
    主要{
      フレックス:0 0 33.3%; 
      高さ:100px;
      背景色: #ccc;
      境界線: 1px 実線の赤;
    }
  </スタイル>
</head>
<本文>
  <div class="コンテナ">  
    <div class="item">左</div>
    <main>メイン</main>
    <div class="item">右</div>
    <div class="item">左</div>
    <main>メイン</main>
    <div class="item">右</div>
    <div class="item">左</div>
    <main>メイン</main>
    <div class="item">右</div>
  </div>
</本文>
</html>


flex:0 0 33.3% は flex-basis:33.3% と同等で、各要素の幅が外側のコンテナーの 33.3% になるため、各行に最大 3 つの要素を配置できます。

flex-wrap:wrap は、各行がいっぱいになると自動的に折り返されることを意味します。

例3:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
    <title>フレックスレイアウト</title>
  <スタイル> 
    *{
      パディング:0;
      マージン:0;
      ボックスのサイズ: 境界線ボックス;
    }
    本文、html{
      幅: 100%;
      高さ:100vh;
      最小幅: 800px;
      ディスプレイ:フレックス;
      display: -webkit-flex; /* Safari */
      コンテンツの中央揃え: 中央;
      アイテムの位置を中央揃えにします。
    } 
    。容器{
      幅: 300ピクセル;
      高さ: 300px;
      マージン: 50px;
      ディスプレイ:フレックス;
      display: -webkit-flex; /* Safari */
      flex-wrap: ラップ;
      コンテンツの両端揃え: スペースの間;
    }
    .コンテナ>.アイテム{
      フレックス:0 0 30%; 
      高さ:90px;
      背景: #abcdef;
      境界線: 1px 実線の赤;
    }
    主要{
      フレックス:0 0 30%; 
      高さ:90px;
      背景色: #ccc;
      境界線: 1px 実線の赤;
    }
  </スタイル>
</head>
<本文>
  <div class="コンテナ">  
    <div class="item">左</div>
    <main>メイン</main>
    <div class="item">右</div>
    <div class="item">左</div>
    <main>メイン</main>
    <div class="item">右</div>
    <div class="item">左</div>
    <main>メイン</main>
    <div class="item">右</div>
  </div>
</本文>
</html>


justify-content:space-between は、主軸方向の余分なスペースが 2 つの項目間に均等に分散されることを意味します。

CSS3 flexレイアウトを使用して要素を均等に配置するサンプルコードについての記事はこれで終わりです。flexを使用して要素を均等に配置する方法の詳細については、123WORDPRESS.COMの以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

<<:  ウェブページの画像最適化ツールと使用方法のヒントの共有

>>:  MySQL の隠し列の詳細表示

推薦する

MySQL データベースの一般的な基本操作の分析 [データベースの作成、表示、変更、削除]

この記事では、例を使用して、MySQL データベースの一般的な基本操作について説明します。ご参考まで...

Docker 構成 Alibaba Cloud イメージアクセラレーション プル実装

今日はdockerを使ってイメージをpullしたのですが、速度が悪くて見れず最後まで待ち続けました。...

非常に詳細な MySQL8.0.22 のインストールと設定のチュートリアル

みなさんこんにちは。今日は、MySQL 8.0.22 のインストールと構成について学習します。注意深...

JS で async と await を使用する方法

目次1. 非同期2. 待つ: 3. 包括的なアプリケーション1. 非同期async 、非同期コードが...

JavaScript イベント キャプチャ バブリングとキャプチャの詳細

目次1. イベントの流れ1. コンセプト2. DOMイベントフロー2. イベントの委任1. イベント...

Vue 監視属性のグラフィック例の詳細な説明

目次リスナープロパティとは何ですか?リスニングプロパティと計算プロパティの違いは何ですか?監視プロパ...

Windows 10 の仮想マシンに Mac システムをインストールするグラフィック チュートリアル

1. 仮想マシンバージョン15.5.1をダウンロードする公式サイトから直接最新バージョンをダウンロー...

xshellリモート接続の自動切断の問題の解決方法の詳細な説明

xshell を使用したリモート接続システムの自動切断の問題の解決策: 1. サーバー構成サーバーは...

MySQL での実行計画の explain コマンド例の詳細な説明

序文explain コマンドは、クエリ オプティマイザーがクエリの実行を決定した方法を確認する主な方...

JavaScriptはオブジェクトの不要なプロパティを削除します

目次例方法1: 削除方法2: 分解補充する要約するThinking シリーズは、10 分で実用的なプ...

CocosCreatorでシューティングゲームを作る詳しい解説

目次シーン設定ゲームリソース砲塔の回転動的に生成された弾丸衝突計算効果を高めるターゲットの動き弾薬庫...

Mac に MySQL データベースをインストールし、環境変数を設定するためのグラフィック チュートリアル

目次MySQLをインストールする環境変数の設定MySQLをインストールするmysqlをダウンロードし...

MySQL の 2 種類の一時テーブルの使用方法の詳細な説明

外部一時テーブルCREATE TEMPORARY TABLE によって作成された一時テーブルは、外部...

Alpine イメージに Ansible サービスを追加する方法

apk add ansible を使用して、alpine イメージに ansible サービスを追加...

JavaScript 配列メソッド - 体系的な概要と詳細な説明

目次一般的な配列メソッド配列要素の追加と削除配列ヘッダーの操作配列の末尾を操作する任意の場所に追加ま...