Kuasai kemahiran susun atur fleksibel CSS3 dan bina antara muka web moden dengan mudah.

Kuasai kemahiran susun atur fleksibel CSS3 dan bina antara muka web moden dengan mudah.

Dalam era perkembangan pesat Internet hari ini, reka bentuk web telah menjadi satu bidang yang penting. Untuk memenuhi keperluan pengguna untuk antara muka web, pembangun terus meneroka dan menggunakan teknologi baharu untuk membina halaman web yang lebih moden dan menarik. Antaranya, susun atur fleksibel CSS3 ialah teknik yang boleh membantu pembangun menyusun elemen halaman web dengan lebih fleksibel.

Apa yang dipanggil susun atur fleksibel, iaitu susun atur kotak fleksibel, ialah kaedah susun atur responsif yang secara automatik boleh melaraskan kedudukan dan saiz elemen mengikut saiz dan peraturan susun atur bekas. Berbanding dengan susun atur model kotak tradisional, susun atur fleksibel adalah lebih mudah dan fleksibel, dan boleh menyesuaikan diri dengan pelbagai saiz skrin dan jenis peranti.

Sebelum mula menggunakan susun atur flex, kita perlu memahami beberapa konsep asas terlebih dahulu. Reka letak fleksibel melibatkan tiga atribut berikut:

1. Bekas fleksibel (bekas fleksibel): Elemen menggunakan reka letak fleksibel dipanggil bekas Dengan menetapkan atribut paparan kepada flex atau inline-flex, elemen boleh ditetapkan Bekas kotak yang fleksibel.

　2. Item fleksibel (item fleksibel): Setiap sub-elemen dalam bekas dipanggil item, dan susunan, saiz dan atribut gaya lain boleh ditetapkan.

　3. Paksi lentur (paksi lentur): Atribut arah lentur boleh digunakan untuk menentukan arah susunan item dalam bekas Paksi lentur ialah paksi yang dibentuk oleh arah susunan.

Sebelum menghuraikan teknik susun atur fleksibel, mari kita lihat contoh mudah untuk memahami penggunaan asas susun atur flex:

<div class="container">
  <div class="item">项目1</div>
  <div class="item">项目2</div>
  <div class="item">项目3</div>
</div>

<style>
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item {
  flex: 1;
  height: 100px;
  background-color: #ff9900;
}
</style>

Dalam kod di atas, kami mencipta Bekas, dan tetapkan bekas untuk melenturkan reka letak melalui atribut paparan. Seterusnya, penjajaran antara item ditetapkan kepada ruang-antara melalui atribut justify-content, supaya selang antara item adalah sama. Kemudian gunakan atribut align-item untuk menetapkan penjajaran item pada paksi silang ke tengah, iaitu, pemusatan menegak.

Dalam gaya projek, kami menetapkan atribut flex kepada 1 supaya projek dapat mengagihkan ruang yang tinggal secara sama rata. Pada masa yang sama, ketinggian projek ditetapkan kepada 100px, dan warna latar belakang ditetapkan untuk projek itu.

Contoh di atas menunjukkan cara menggunakan reka letak fleksibel untuk mencapai kesan pembahagian dua baris. Di bawah, kami memperkenalkan beberapa teknik susun atur fleksibel lain yang biasa digunakan.

1. Reka letak tiga lajur dengan lebar yang sama

<div class="container">
  <div class="item">项目1</div>
  <div class="item">项目2</div>
  <div class="item">项目3</div>
</div>

<style>
.container {
  display: flex;
}

.item {
  flex: 1;
  height: 100px;
  background-color: #ff9900;
}
</style>

Dengan menetapkan bekas kepada reka letak lentur, dan kemudian menetapkan sifat lentur item kepada 1, anda boleh mencapai tiga -letak lajur dengan kesan reka letak lajur.

2. Susun atur dua lajur dengan ketinggian yang sama

<div class="container">
  <div class="left-item">左侧项目</div>
  <div class="right-item">右侧项目</div>
</div>

<style>
.container {
  display: flex;
}

.left-item {
  flex: 1;
  height: 200px;
  background-color: #ff9900;
}

.right-item {
  flex: 1;
  height: 200px;
  background-color: #00ccff;
}
</style>

Dengan menetapkan bekas kepada reka letak lentur, dan kemudian menetapkan sifat lentur item kiri dan kanan kepada 1, dsb. . boleh dicapai kesan susun atur dua lajur.

　3. Pemusatan mendatar dan menegak

<div class="container">
  <div class="item">项目</div>
</div>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background-color: #ff9900;
}

.item {
  flex: 1;
  height: 100px;
  background-color: #00ccff;
}
</style>

　Dengan menetapkan bekas kepada reka letak lentur, dan kemudian menetapkan kedua-dua sifat justify-content dan align-item ke tengah, horizontality boleh dicapai dan kesan pemusatan menegak.

Melalui contoh di atas, kita dapat melihat bahawa menggunakan teknik reka letak fleksibel CSS3 boleh menjadikannya lebih mudah dan lebih fleksibel untuk membina antara muka web moden. Dengan menetapkan sifat bekas dan projek dengan betul, kami boleh mencapai pelbagai kesan reka letak untuk memenuhi keperluan pengguna untuk antara muka web. Dalam pembangunan sebenar, kami boleh menggunakan pelbagai teknik susun atur fleksibel mengikut keperluan untuk membina antara muka web yang menarik dan responsif.

Atas ialah kandungan terperinci Kuasai kemahiran susun atur fleksibel CSS3 dan bina antara muka web moden dengan mudah.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!