Bagaimana untuk melaksanakan susun atur ketinggian tersuai dengan skala 2: 5: 3 dan menyesuaikan diri dengan resolusi yang berbeza menggunakan CSS Flexbox?

CSS Flexbox mengimplementasikan susun atur yang sangat berkadar adaptif

Artikel ini menerangkan cara menggunakan CSS Flexbox untuk membuat susun atur dengan nisbah ketinggian 2: 5: 3 dan tetap konsisten pada resolusi yang berbeza. Susun atur ini sangat praktikal dalam reka bentuk web dan membolehkan peruntukan fleksibel ketinggian blok kandungan halaman.

Teknologi teras adalah model kotak elastik Flexbox CSS. Dengan menetapkan display: flex bekas induk dan atribut flex elemen kanak -kanak, anda boleh dengan mudah mengawal bahagian ketinggian elemen kanak -kanak.

Pertama, tetapkan gaya kontena induk supaya ia menjadi bekas flex:

 .container {
  Paparan: Flex;
  flex-arah: lajur; /* Susunan menegak elemen kanak -kanak*/
  Ketinggian: 100VH; /* Menduduki ketinggian viewport*/
  Align-items: regangan; /* Unsur kanak -kanak menyokong lebar bekas induk*/
}

flex-direction: column; Memastikan bahawa unsur -unsur kanak -kanak diatur secara menegak; height: 100vh; align-items: stretch; Pastikan elemen kanak -kanak penuh dengan bekas induk.

Kemudian, tetapkan atribut flex elemen kanak -kanak untuk menentukan skala ketinggian:

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

flex: 2; , flex: 5; , flex: 3; masing -masing mentakrifkan nisbah ketinggian tiga elemen kanak -kanak menjadi 2: 5: 3. Flexbox secara automatik memperuntukkan ruang yang tersedia berdasarkan skala ini.

Berikut adalah contoh HTML yang lengkap:

 


  <title>Nisbah ketinggian flexbox</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>

Melalui kaedah ini, nisbah ketinggian tiga sub-elemen sentiasa dikekalkan pada 2: 5: 3 tanpa mengira saiz perubahan tetingkap penyemak imbas, mencapai susun atur penyesuaian yang sempurna.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan susun atur ketinggian tersuai dengan skala 2: 5: 3 dan menyesuaikan diri dengan resolusi yang berbeza menggunakan CSS Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!