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 ローカルログインでポート番号を使用してログインできない問題の解決策

最近、Linux を使用してローカルにログインしていたところ、正常にログインできず、次のエラー メッ...

Vue での this.$set の動的データバインディングのケーススタディ

インターネット上の this.$set の説明はわかりにくいと感じます。単一データ、オブジェクト、配...

Nginx における 2 つの現在の制限方法についての簡単な説明

負荷は通常、システム設計時に予測されます。システムがパブリック ネットワークに公開されている場合、悪...

vue3 watch と watchEffect の使い方と違い

1.リスナーを見る時計のご紹介 'vue' から { ref, reactive, ...

ネイティブ Js で実装されたシンプルなシームレス スクロール カルーセルのサンプル コード

シンプルなシームレススクロールカルーセルには多くの抜け穴があり、後から画像を追加するのは非常に不便で...

Vueで背景色と透明度を設定する方法

背景色と透明度の設定上記のように、最初の画像の場合は、灰色の背景と左上隅に白い「カバー」という文字を...

ユニアプリプロジェクトでのウォーターフォールレイアウトの実装

GitHubアドレス、気に入ったらスターを付けてくださいプラグインのプレビューチュートリアル1. プ...

Linuxフラッシュのインストール方法

Linuxにフラッシュをインストールする方法1. Flashの公式サイトにアクセスし、ダウンロードを...

LinuxのCPU負荷とCPU使用率の詳細な説明

CPU 負荷と CPU 使用率これらは両方とも、ある程度、マシンの忙しさを反映できます。 CPU 使...

CSSレコードテキストアイコン配置のいくつかのソリューション

開発中に画像とテキストが 1 行に表示されることはよくあります。2 つのインライン要素を揃えるのは通...

Dockerコマンドの学習を1つの記事にまとめる

目次導入ミラーリポジトリログイン引く押す検索ローカル画像管理画像rmiタグ建てる歴史保存負荷輸入コン...

CSSスタイルシートを効率的に使用するためのヒント: スタイルシートの力を最大限に活用する

インターネット経済の継続的な発展に伴い、インターネット上の専門ウェブサイト、公共サービスウェブサイト...

LinuxはNetworkManagerを使用してMACアドレスをランダムに生成します

今では、自宅のソファーに座っていても、外の喫茶店にいても、ノートパソコンの電源を入れてWi-Fiに接...

CSSアニメーションに基づくSVGボタンのサンプルコード

具体的なコードは次のとおりです。 <a href="#"> <...

Jira リバース プロキシを実装するための nginx について

概要: nginx リバース プロキシ jira を構成し、https を実装します。Tomcat ...