2：5：3のスケールでカスタム高さレイアウトを実装し、CSS Flexboxを使用してさまざまな解像度に適応する方法は？

CSS Flexboxは、適応的に比例したレイアウトを実装します

この記事では、CSS Flexboxを使用して2：5：3の高さのレイアウトを作成し、異なる解像度で一貫性を保つ方法について説明します。このレイアウトは、Webデザインで非常に実用的であり、ページコンテンツブロックの高さの柔軟な割り当てを可能にします。

コアテクノロジーは、CSSのFlexBox Elastic Boxモデルです。 display: flex属性と子要素のflex属性を設定することにより、子要素の高さの割合を簡単に制御できます。

まず、フレックスコンテナになるように親コンテナスタイルを設定します。

 。容器 {
  ディスプレイ：Flex;
  フレックス方向：列; /*子要素の垂直方向の配置*/
  高さ：100VH; /* Viewportの高さを占める*/
  Align-Items：ストレッチ; /*子要素は親コンテナの幅をサポートします*/
}

flex-direction: column;子要素が垂直に配置されていることを確認してください。 height: 100vh; align-items: stretch;子要素が親コンテナでいっぱいであることを確認してください。

次に、子要素のflex属性を設定して、高さスケールを定義します。

 .box1 {flex：2; }
.box2 {flex：5; }
.box3 {flex：3; }

flex: 2; 、 flex: 5; 、 flex: 3;それぞれ3つの子要素の高さ比を2：5：3と定義します。 FlexBoxは、このスケールに基づいて利用可能なスペースを自動的に割り当てます。

これが完全なHTMLの例です。

 


  <title>フレックスボックスの高さ比</title>
  <style>
    .container {
      display: flex;
      flex-direction: column;
      height: 100vh;
      align-items: stretch;
    }
    .box1 { flex: 2; background-color: lightpink; }
    .box2 { flex: 5; background-color: lightblue; }
    .box3 { flex: 3; background-color: lightgreen; }
  </style>


  <div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>

この方法により、3つのサブエレメントの高さ比は、ブラウザウィンドウの変更のサイズに関係なく、常に2：5：3に維持され、完全な適応レイアウトを実現します。

以上が2：5：3のスケールでカスタム高さレイアウトを実装し、CSS Flexboxを使用してさまざまな解像度に適応する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。