Bagaimanakah Saya Boleh Melaksanakan Tatal Menegak dalam Aplikasi Flexbox Tinggi Penuh?

Menggabungkan Flexbox dan Tatal Menegak dalam Aplikasi Ketinggian Penuh

Flexbox menyediakan mekanisme yang berkuasa untuk mencipta reka letak yang fleksibel. Walau bagaimanapun, apabila digunakan bersama-sama dengan aplikasi ketinggian penuh, mencapai tatal menegak boleh menjadi satu cabaran.

Penyelesaian Sebelumnya

Pendekatan sebelumnya, seperti menggunakan sifat flexbox yang lebih lama (cth., paparan: box), telah terbukti berkesan untuk pelayar yang menyokong sintaks flexbox warisan. Walau bagaimanapun, untuk penyemak imbas moden yang menggunakan sifat flexbox yang lebih baharu, penyelesaian seperti menetapkan ketinggian: 0px pada bekas telah digunakan, tetapi mungkin menimbulkan kesan sampingan yang tidak diingini.

Penyelesaian Optimum

Penyelesaian optimum melibatkan penetapan ketinggian kepada elemen boleh tatal menegak dalam susun atur flexbox. Dengan menentukan ketinggian (atau ketinggian minimum), flexbox mengira semula ketinggian elemen, membolehkan ia berkembang mengikut keperluan untuk menampung kandungan sambil masih menguatkuasakan tatal menegak apabila perlu.

#container article {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 100px;
}

Faedah

Penyelesaian ini:

• Membekalkan kedua-dua fleksibiliti mendatar dan menegak dalam kotak fleksibel reka letak.
• Memastikan penatalan menegak hanya apabila diperlukan, tanpa memerlukan penyelesaian tambahan.
• Adalah serasi sepenuhnya dengan penyemak imbas moden dan piawaian CSS masa hadapan.

Demo

Versi dipertingkatkan JSFiddle yang disediakan menunjukkan penyelesaian optimum dalam tindakan: http://jsfiddle.net/ch7n6/867/.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Melaksanakan Tatal Menegak dalam Aplikasi Flexbox Tinggi Penuh?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!