Apakah bekas susun atur yang fleksibel?

Bekas susun atur fleksibel merujuk kepada elemen induk yang menggunakan teknologi reka letak fleksibel. Dengan menetapkan sifat dan nilai bekas, anda boleh mengawal cara elemen anak dalam bekas itu disusun, diselaraskan dan berskala. Ciri-ciri bekas susun atur fleksibel biasa: 1. paparan, tetapkan bekas kepada susun atur fleksibel, tetapkan arah paksi utama 3. flex-wrap, nyatakan sama ada untuk membenarkan sub-elemen untuk membalut; justify-content, tetapkan sub-elemen untuk membalut Penjajaran elemen pada paksi utama;

Sistem pengendalian untuk tutorial ini: sistem Windows 10, komputer Dell G3.

Flexbox ialah teknologi untuk mencipta reka letak yang fleksibel dan adaptif yang menyediakan cara mudah untuk menyusun dan menjajarkan elemen untuk pelbagai saiz dan peralatan skrin yang berbeza.

Bekas susun atur fleksibel merujuk kepada elemen induk yang menggunakan teknologi reka letak fleksibel. Dengan menetapkan sifat dan nilai bekas, kita boleh mengawal cara elemen anak dalam bekas itu disusun, diselaraskan dan berskala.

Dalam susun atur fleksibel, terdapat dua konsep utama: paksi utama dan paksi silang. Paksi utama merujuk kepada arah di mana elemen disusun dalam bekas, yang boleh mendatar (kiri ke kanan) atau menegak (atas ke bawah). Paksi silang adalah berserenjang dengan paksi utama dan digunakan untuk menjajarkan elemen.

Berikut ialah beberapa sifat bekas biasa bagi reka letak fleksibel:

paparan: Tetapkan bekas kepada reka letak fleksibel. Tentukan bekas sebagai susun atur yang fleksibel dengan menetapkan sifat paparan kepada flex atau inline-flex. lentur mewakili elemen peringkat blok, dan lentur sebaris mewakili elemen sebaris.

arah-flex: Tetapkan arah paksi utama. Nilai lalai ialah baris, yang bermaksud paksi utama adalah mendatar. Nilai lain termasuk lajur (paksi utama adalah menegak), baris-terbalik (paksi utama adalah mendatar dan elemen disusun dari kanan ke kiri), dan lajur-terbalik (paksi utama adalah menegak dan elemen disusun dari bawah ke atas).

flex-wrap: Menentukan sama ada untuk membenarkan sub-elemen membalut. Secara lalai, semua elemen anak dalam bekas fleksibel dijajarkan sedekat mungkin. Menetapkan atribut flex-wrap kepada wrap boleh menyebabkan elemen kanak-kanak membalut secara automatik apabila mereka perlu membalut.

justify-content: Tetapkan penjajaran elemen anak pada paksi utama. Anda boleh menggunakan sifat ini untuk mengawal kedudukan mendatar elemen kanak-kanak dalam bekas. Nilai biasa termasuk fleks-mula (dijajar kiri), lentur-hujung (kanan), tengah (tengah-tengah), ruang-antara (teredar sama rata pada paksi utama) dan ruang-sekitar (teredar sama rata pada paksi utama, meninggalkan kedua-dua belah Terdapat ruang putih) dsb.

align-item: Tetapkan penjajaran elemen anak pada paksi silang. Anda boleh menggunakan sifat ini untuk mengawal kedudukan menegak elemen anak dalam bekas. Nilai biasa termasuk mula lentur (penjajaran atas), hujung lentur (penjajaran bawah), tengah (penjajaran tengah), garis dasar (diselaraskan dengan garis dasar teks pertama), regangan (regangkan untuk mengisi keseluruhan bekas), dsb. .

align-content: Tetapkan penjajaran elemen anak berbilang garis pada paksi silang. Apabila elemen anak mempunyai berbilang baris, anda boleh menggunakan atribut ini untuk mengawal kedudukan menegak elemen anak berbilang baris dalam bekas. Nilai biasa adalah serupa dengan align-item.

Di atas ialah beberapa kegunaan biasa atribut kontena bagi reka letak fleksibel. Dengan melaraskan sifat dan nilai ini, kami boleh mencipta pelbagai kesan reka letak yang berbeza dengan mudah. Atribut bekas susun atur elastik menyediakan kaedah susun atur yang lebih fleksibel dan adaptif, yang sesuai untuk senario aplikasi yang pelbagai seperti reka bentuk responsif dan peranti mudah alih.

Atas ialah kandungan terperinci Apakah bekas susun atur yang fleksibel?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!