Bagaimana untuk mencapai susun atur ketinggian penyesuaian dengan skala 2: 5: 3 menggunakan CSS Flexbox?

Mudah membina susun atur penyesuaian dan sangat tinggi dengan skala 2: 5: 3 dengan css flexbox

Artikel ini menerangkan cara menggunakan model kotak elastik CSS (flexbox) untuk membuat bekas dengan bahagian ketinggian tepat tiga elemen kanak -kanak di dalamnya menjadi 2: 5: 3, dan boleh diselaraskan secara automatik mengikut saiz skrin, sentiasa mengekalkan perkadaran dan mengisi ketinggian bekas ibu bapa.

Kami memerlukan bekas yang mengandungi tiga elemen kanak -kanak, dan nisbah ketinggian tiga elemen kanak -kanak ini mesti dikekalkan pada 2: 5: 3, dan boleh disesuaikan dengan sempurna di pelbagai resolusi skrin. Susun atur flexbox dapat dengan mudah mencapai ini.

Kuncinya adalah untuk menetapkan display: flex dan flex-direction: column bekas induk, yang menjadikan unsur-unsur kanak-kanak diatur secara menegak. Kemudian, gunakan atribut flex untuk menetapkan perkadaran ruang yang diduduki oleh setiap elemen kanak -kanak: flex: 2 , flex: 5 , dan flex: 3 masing -masing mewakili elemen kanak -kanak yang menduduki 2 bahagian, 5 bahagian dan 3 bahagian ketinggian bekas induk. Ketinggian bekas induk secara automatik diselaraskan mengikut kandungan untuk memastikan bahawa elemen kanak -kanak berkadar dengan betul dan menyesuaikan diri. Untuk pusat menegak, kami menggunakan align-items: center .

Coretan kod berikut menunjukkan pelaksanaan:

 .container {
  Paparan: Flex;
  flex-arah: lajur;
  Align-item: pusat; /* pusat menegak*/
  Ketinggian: 100VH; /* Ia menduduki ketinggian paparan penuh, boleh diubah suai mengikut keadaan sebenar*/
}

.item1 {
  Flex: 2;
}

.item2 {
  Flex: 5;
}

.item3 {
  Flex: 3;
}

Untuk menunjukkan kesan lebih intuitif, kami menyediakan contoh HTML yang lengkap:

 


  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Susun atur flexbox</title>
  <style>
    .container {
      height: 100vh;
      width: 100px;
      background: #000;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .item1 {
      flex: 2;
      background: pink;
    }

    .item2 {
      flex: 5;
      background-color: blue;
    }

    .item3 {
      flex: 3;
      background-color: cadetblue;
    }
  </style>


  <div class="container">
    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3"></div>
  </div>

Kod ini mewujudkan susun atur yang sangat menyesuaikan diri dengan nisbah 2: 5: 3. Ketinggian bekas induk ditetapkan kepada 100vh supaya ia menduduki ketinggian viewport, yang boleh anda sesuaikan mengikut keperluan sebenar.

Atas ialah kandungan terperinci Bagaimana untuk mencapai susun atur ketinggian penyesuaian dengan skala 2: 5: 3 menggunakan CSS Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!