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 の隠し列の詳細表示