Penjelasan terperinci tentang aplikasi susun atur elastik CSS Flex dalam pembangunan terminal mudah alih

Penjelasan terperinci tentang aplikasi susun atur elastik Css Flex dalam pembangunan mudah alih

Dalam era popularisasi dan kepelbagaian peranti mudah alih, reka bentuk responsif Ia telah menjadi standard untuk pembangunan web. Sebagai penyelesaian reka bentuk responsif, susun atur elastik CSS Flex boleh menyesuaikan diri dengan baik kepada perubahan dalam saiz skrin dan orientasi peranti yang berbeza, jadi ia digunakan secara meluas dalam pembangunan mudah alih.

1. Apakah itu CSS Flexible Layout
   CSS Flex Flexible layout ialah kaedah susun atur yang diperkenalkan oleh CSS3, yang membolehkan sub-elemen dalam bekas disusun mengikut perkadaran tertentu dan peraturan. Susun, dan boleh melaraskan saiz dan kedudukan elemen secara automatik untuk menyesuaikan diri dengan persekitaran reka letak yang berbeza. Reka letak fleksibel berfungsi dengan menetapkan beberapa sifat dan nilai tertentu kepada bekas.
2. Bekas fleksibel dan sub-elemen fleksibel
   Dalam susun atur fleksibel, terdapat dua konsep penting: bekas fleksibel dan sub-elemen fleksibel.

Bekas fleksibel: Cipta bekas fleksibel dengan menetapkan sifat paparannya kepada flex atau inline-flex. Elemen kanak-kanak bekas fleksibel akan disusun dan diselaraskan mengikut peraturan tertentu.

Subelemen fleksibel: Setiap subelemen dalam bekas fleksibel ialah subelemen fleksibel. Untuk setiap sub-elemen fleksibel, anda boleh mengawal prestasinya dalam bekas fleksibel dengan menetapkan beberapa sifat khusus.

3. Sifat biasa bekas fleksibel

Berikut adalah sifat yang biasa digunakan bagi bekas fleksibel:

#🎜-🎜 : Kegunaan Untuk menetapkan arah susunan elemen anak dalam bekas fleksibel, nilai yang tersedia ialah baris (susunan mendatar, nilai lalai), baris-terbalik (susunan mendatar terbalik), lajur (susunan menegak), dan lajur-terbalik ( susunan menegak terbalik).

justify-content: digunakan untuk menetapkan penjajaran elemen anak dalam bekas fleksibel di sepanjang paksi utama Nilai-nilai pilihan termasuk flex-start (penjajaran mula, nilai lalai), flex-end (tamat. penjajaran), tengah (diselaraskan di tengah), ruang-antara (diselaraskan pada kedua-dua hujung, jarak yang sama antara sub-elemen), ruang-keliling (jarak yang sama antara sub-elemen).

align-item: digunakan untuk menetapkan penjajaran elemen kanak-kanak dalam bekas fleksibel di sepanjang paksi sisi (paksi berserenjang dengan paksi utama termasuk nilai flex-start (penjajaran mula). , hujung lentur (penjajaran hujung), tengah (penjajaran tengah), garis dasar (penjajaran garis dasar, penjajaran garis dasar elemen kanak-kanak), regangan (penjajaran regangan, elemen kanak-kanak diregangkan agar sesuai dengan bekas).

align-content: Digunakan untuk menetapkan penjajaran sub-elemen berbilang baris dalam bekas fleksibel pada paksi sisi Ia hanya berkuat kuasa apabila bekas fleksibel mempunyai berbilang baris sub-elemen. Nilai pilihan termasuk mula lentur (penjajaran mula), hujung lentur (penjajaran hujung), tengah (penjajaran tengah), ruang antara (penjajaran di kedua-dua hujung, jarak yang sama antara baris), ruang sekeliling (antara baris) sama jarak (jarak pada kedua-dua belah setiap baris ialah dua kali jarak baris), regangan (penjajaran regangan, elemen kanak-kanak diregangkan agar sesuai dengan bekas).

Atribut biasa unsur anak anjal

Berikut adalah sifat yang biasa digunakan bagi elemen anak anjal:

#🎜🎜 -basis : Digunakan untuk menetapkan saiz awal sub-elemen anjal dalam bekas anjal Ia boleh menjadi nilai tertentu (seperti px) atau nilai relatif (seperti peratusan Nilai lalai ialah auto. Apabila ditetapkan kepada auto, elemen kanak-kanak secara automatik berkembang atau mengecut berdasarkan kandungannya.

flex-grow: digunakan untuk menetapkan nisbah pembesaran sub-elemen anjal, yang menentukan saiz ruang yang diduduki oleh sub-elemen dalam bekas fleksibel. Nilai lalai ialah 0, yang bermaksud tiada zum masuk.

flex-shrink: Digunakan untuk menetapkan nisbah pengurangan sub-elemen anjal, yang menentukan saiz sub-elemen yang dikecutkan dalam bekas fleksibel. Nilai lalai ialah 1, yang bermaksud zum keluar.

flex: digunakan untuk menetapkan sifat trengkas bagi flex-grow, flex-shrink dan flex-base. Contohnya, flex: 1 1 auto bermaksud elemen kanak-kanak boleh dibesarkan atau dikecilkan, dan saiz awal dalam bekas fleksibel ialah auto.

align-self: Digunakan untuk mengatasi atribut align-item bagi bekas fleksibel dan menetapkan penjajaran pada paksi silang untuk elemen anak tunggal.

Contoh Kod

5. Berikut ialah contoh kod yang menunjukkan cara menggunakan susun atur elastik untuk mencapai susunan mendatar sama lebar biasa dalam mudah alih pembangunan Dan susun atur berpusat menegak:

Kod HTML:

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

Kod CSS:

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

.item {
  flex: 1;
  text-align: center;
  background-color: #ccc;
  margin: 0 10px;
  padding: 10px;
}

Dalam kod di atas, bekas menetapkan atribut paparan kepada flex, Menunjukkan mencipta bekas yang fleksibel. Pada masa yang sama, tetapkan penjajaran mendatar elemen kanak-kanak kepada ruang-antara melalui atribut justify-content, supaya elemen kanak-kanak disusun dengan lebar yang sama dalam arah mendatar, dan jarak antara elemen kanak-kanak adalah sama. Tetapkan penjajaran menegak elemen kanak-kanak ke tengah melalui atribut item penjajaran, supaya elemen anak berpusat pada arah menegak.

Setiap elemen kanak-kanak mempunyai atribut flex yang ditetapkan kepada 1, supaya elemen kanak-kanak boleh menduduki ruang bekas fleksibel dengan lebar yang sama. Pada masa yang sama, beberapa gaya asas ditetapkan, seperti warna latar belakang, jidar dan pelapik, untuk menunjukkan kesan reka letak dengan lebih baik.

Melalui contoh di atas, kita dapat melihat bahawa menggunakan susun atur elastik CSS Flex boleh merealisasikan pelbagai keperluan susun atur biasa dengan mudah dan cekap, terutamanya sesuai untuk pembangunan mudah alih. Sama ada susunan mendatar lebar yang sama, pemusatan menegak atau susun atur lain yang lebih kompleks, susun atur Flex boleh mengendalikannya dengan mudah dan meningkatkan kecekapan pembangunan.

Ringkasan
Susun atur fleksibel CSS Flex ialah kaedah reka letak yang digunakan secara meluas dalam pembangunan mudah alih. Dengan menetapkan sifat bekas fleksibel dan sub-elemen fleksibel, kami boleh mencapai pelbagai kesan susun atur responsif. Artikel di atas menyediakan beberapa sifat dan nilai bekas fleksibel dan subelemen fleksibel yang biasa digunakan Pada masa yang sama, ia menunjukkan melalui kod sampel cara menggunakan reka letak fleksibel untuk mencapai susunan mendatar yang sama lebar dan susun atur pemusatan menegak. Saya berharap dapat memberikan sedikit bantuan kepada pembaca dalam menggunakan susun atur elastik CSS Flex dalam pembangunan mudah alih.

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