Penjelasan terperinci tentang aplikasi susun atur elastik CSS Flex dalam paparan imej responsif

Penjelasan terperinci tentang aplikasi susun atur elastik CSS Flex dalam paparan imej responsif

Pada masa lalu, apabila kami memaparkan imej pada halaman web, yang sering kita hadapi Salah satu masalah ialah bagaimana untuk membuat imej dipaparkan dengan baik pada saiz skrin yang berbeza. Kaedah susun atur CSS tradisional tidak dapat menyelesaikan masalah ini dengan baik, dan susun atur elastik CSS Flex ialah penyelesaian yang berkesan. Artikel ini akan memperkenalkan secara terperinci aplikasi susun atur elastik CSS Flex dalam paparan imej responsif dan memberikan contoh kod khusus.

1 Apakah itu Reka Letak Fleksibel CSS

Reka Letak Fleksibel CSS ialah ciri baharu dalam CSS3, yang membolehkan elemen dalam bekas melaraskan secara automatik kepada saiz skrin yang berbeza Laraskan saiz dan kedudukan. Susun atur fleksibel terdiri daripada satu siri bekas dan item Bekas ialah elemen induk dan item adalah elemen anak. Dengan menetapkan sifat yang berbeza untuk bekas dan item, kami boleh mencapai kesan susun atur yang fleksibel.

2. Prinsip asas susun atur elastik Flex

Apabila menggunakan susun atur Flex, kita perlu menetapkan atribut paparan bekas kepada flex atau inline-flex. Unsur-unsur dalam bekas akan secara automatik menjadi item dan akan disusun mengikut peraturan tertentu secara lalai.

Susun atur fleksibel adalah berdasarkan dua konsep: paksi utama dan paksi silang. Paksi utama ialah arah utama bekas Flex, dan item disusun di sepanjang paksi utama secara lalai. Paksi silang ialah paksi yang berserenjang dengan paksi utama.

Dengan menetapkan sifat yang berbeza, anda boleh mengawal kedudukan, saiz dan susunan item pada paksi utama dan paksi silang. Atribut yang biasa digunakan ialah:

1. flex-direction: Tetapkan arah paksi utama Nilai lalai ialah baris (dari kiri ke kanan), tetapi ia juga boleh berbalik baris (. dari kanan ke kiri), lajur (dari atas ke bawah) dan lajur-terbalik (dari bawah ke atas).
2. flex-wrap: Tetapkan sama ada untuk membenarkan item dibalut Nilai lalai ialah nowrap, yang bermaksud tiada pembalut garisan juga boleh dibalut (balut garisan) dan balut-terbalik (balut baris terbalik). .
3. justify-content: Kawal penjajaran item pada paksi utama Nilai lalai ialah flex-start (penjajaran titik permulaan), ia juga boleh menjadi flex-end (penjajaran titik akhir), tengah. (penjajaran tengah), ruang -antara (justifikasikan kedua-dua hujung, dengan jarak yang sama antara item) dan ruang sekeliling (jarak yang sama pada kedua-dua belah setiap item).
4. align-item: Kawal penjajaran item pada paksi silang Nilai lalai ialah regangan (regangan untuk mengisi ketinggian bekas), ia juga boleh menjadi flex-start (penjajaran titik permulaan. ), hujung lentur ( penjajaran titik akhir), pusat (penjajaran tengah) dan garis dasar (penjajaran garis dasar).
5. align-self: Mengawal penjajaran satu item pada paksi silang Nilai lalai ialah auto (mewarisi nilai item penjajaran bagi elemen induk), dan juga boleh menjadi flex-start. hujung lentur, tengah dan garis dasar.

3. Contoh paparan imej responsif

Berikut ialah contoh paparan imej responsif yang mudah, kami akan menggunakan reka letak Flex untuk melaksanakannya.

Kod HTML:

<div class="container">
  <div class="item">
    <img src="/static/imghwm/default1.png"  data-src="image1.jpg"  class="lazy" alt="Image 1">
  </div>
  <div class="item">
    <img src="/static/imghwm/default1.png"  data-src="image2.jpg"  class="lazy" alt="Image 2">
  </div>
  <div class="item">
    <img src="/static/imghwm/default1.png"  data-src="image3.jpg"  class="lazy" alt="Image 3">
  </div>
</div>

Kod CSS:

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  flex: 1 0 30%;
  margin-bottom: 20px;
}

.item img {
  width: 100%;
  height: auto;
}

Dalam contoh ini, kami mula-mula menetapkan .container kepada reka letak fleksibel dan kemudian tetapkan flex - balut adalah balut supaya item akan dibalut secara automatik apabila ia melebihi lebar bekas. Kami juga menetapkan justify-content kepada space-antara, yang akan menyamai ruang antara item pada paksi utama.

.item ialah gaya item Kami menetapkannya kepada flex: 1 0 30%, supaya item akan melaraskan saiznya secara automatik mengikut ruang yang tinggal, meletakkan 3 item dalam setiap baris. Kami juga menetapkan margin-bawah kepada 20px untuk menambah sedikit ruang antara item.

Akhir sekali, kami menetapkan lebar .item img kepada 100% dan ketinggian untuk melaraskan secara automatik. Dengan cara ini imej akan berskala secara automatik dalam saiz skrin yang berbeza.

Melalui contoh mudah ini, kita dapat melihat bahawa reka letak Flex boleh dengan mudah melaksanakan paparan imej responsif. Dengan menetapkan sifat yang berbeza, kami boleh mengawal susunan dan saiz imej dengan mudah pada saiz skrin yang berbeza.

Kesimpulan:

Susun atur elastik CSS Flex ialah penyelesaian susun atur responsif yang berkuasa sesuai untuk pelbagai keperluan susun atur yang berbeza. Dalam paparan imej responsif, kita boleh mengawal susunan dan saiz imej dengan mudah dengan menggunakan susun atur Flex untuk mencapai kesan paparan yang baik. Saya harap pengenalan dalam artikel ini dapat membantu pembaca dalam perkembangan sebenar.

Atas ialah kandungan terperinci Penjelasan terperinci tentang aplikasi susun atur elastik CSS Flex dalam paparan imej responsif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!