Tutorial HTML: Cara menggunakan Flexbox untuk susun atur penyesuaian boleh skala, sama tinggi, sama lebar, sama jarak-html tutorial-php.cn

Tutorial HTML: Cara menggunakan Flexbox untuk susun atur penyesuaian boleh skala, sama tinggi, sama lebar, sama jarak

WBOY

Lepaskan： 2023-10-19 10:22:46

asal

1094 orang telah melayarinya

Tutorial HTML: Cara menggunakan Flexbox untuk susun atur penyesuaian boleh skala, sama tinggi, sama lebar, sama jarak

Tutorial HTML: Cara menggunakan Flexbox untuk susun atur penyesuaian yang sama tinggi, lebar sama, jarak yang sama, anda memerlukan contoh kod khusus

#🎜 🎜# 1. Apakah susun atur Flexbox

Flexbox ialah mod susun atur baharu yang diperkenalkan dalam CSS3 yang boleh mencapai susun atur model kotak fleksibel. Ia adalah singkatan kepada Kotak Fleksibel, yang bermaksud susun atur fleksibel. Susun atur Flexbox secara automatik boleh melaraskan kedudukan dan saiz elemen mengikut saiz bekas untuk mencapai pelbagai susunan fleksibel.

2. Cara menggunakan susun atur Flexbox

Pertama, anda perlu mencipta bekas yang mengandungi elemen yang hendak dibentangkan . Dalam HTML, anda boleh menggunakan elemen div sebagai bekas. Untuk menetapkan bekas kepada reka letak Flexbox, anda perlu menambah kod berikut pada atribut gaya bekas:

<div style="display: flex;"></div>

Salin selepas log masuk

<div style="display: flex; flex-direction: column;"></div>

Salin selepas log masuk

Tetapkan nisbah penskalaan elemen

<div style="display: flex;">
  <div style="flex: 1;"></div>
  <div style="flex: 2;"></div>
</div>

Salin selepas log masuk

Tetapkan ketinggian yang sama dan lebar yang sama

<div style="display: flex;">
  <div style="flex: 1;"></div>
  <div style="flex: 1;"></div>
  <div style="flex: 1;"></div>
</div>

Salin selepas log masuk

Tetapkan jarak

<div style="display: flex; justify-content: space-between; align-items: center;">
  <div></div>
  <div></div>
</div>

Salin selepas log masuk

3. Keserasian penyemak imbas bagi reka letak Flexbox

Reka letak Flexbox mempunyai keserasian yang baik dalam penyemak imbas moden, tetapi mungkin terdapat masalah keserasian dalam beberapa penyemak imbas lama. Masalah ini boleh diselesaikan dengan menambahkan beberapa awalan penyemak imbas seperti -webkit-, -moz-, -ms-, dsb.

4. Contoh kod

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      height: 500px;
      background-color: #f2f2f2;
      padding: 20px;
      box-sizing: border-box;
    }
    
    .item {
      flex: 1;
      width: 100%;
      background-color: #fff;
      border: 1px solid #ccc;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</body>
</html>

Salin selepas log masuk

Kod di atas melaksanakan contoh susun atur Flexbox. Terdapat tiga elemen kanak-kanak dengan ketinggian yang sama dan jarak yang sama dalam bekas. Ketinggian bekas adalah nilai tetap dan dipaparkan secara menegak di tengah-tengah bekas.

Ringkasan:

Menggunakan reka letak Flexbox, anda boleh melaksanakan dengan mudah boleh skala, ketinggian yang sama, lebar yang sama dan reka letak penyesuaian jarak yang sama. Dengan menetapkan nilai atribut bekas dan elemen, adalah mudah untuk mencapai pelbagai susunan fleksibel. Pada masa yang sama, perlu diingatkan bahawa susun atur Flexbox mungkin mempunyai masalah keserasian dalam beberapa penyemak imbas lama, yang boleh diselesaikan dengan menambahkan awalan penyemak imbas. Saya harap artikel ini dapat membantu anda menggunakan reka letak Flexbox dalam pembangunan HTML.

Atas ialah kandungan terperinci Tutorial HTML: Cara menggunakan Flexbox untuk susun atur penyesuaian boleh skala, sama tinggi, sama lebar, sama jarak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!