Tukar CSS kepada Flexbox

15 minitPemulaCSS

Baris ciri ini dibina cara tahun 2012: float, lebar peratus, margin-right yang mesti dibuang daripada kad terakhir, dan hack clearfix. Ia berfungsi… cuma kad-kad itu berlainan tinggi, nampak bersepah. Modenkan dengan flexbox.

Sebelum: tiga kad float dengan tinggi yang berbeza.
Selepas: tiga kad bersebelahan, semuanya sama lebar dan sama tinggi, dengan jarak sekata di antaranya, dan footer di bawah.

Kekangan

.features mesti jadi flex container, dan tiada kad boleh menggunakan float.
Guna gap (sekurang-kurangnya 16px) untuk jarak, bukan margin pada kad individu.
Jangan ubah HTML.
Penyemak mengukur layout dalam bingkai ujian tersembunyi selebar 800px, jadi panel pratonton yang sempit tidak menjejaskan keputusan anda.

Gantikan layout float dalam style.css dengan flexbox: tiga kad dalam satu baris, lebar sama, tinggi sama, jarak sekurang-kurangnya 16px antara kad — tiada float dan tiada clearfix.

Semakan

.features ialah flex container
Tiada float lagi
Satu baris, lebar dan tinggi sama
Jarak sekata 16px+ dan baris memenuhi lebar

Pratonton

Output konsol daripada kod anda akan dipaparkan di sini.