Empat susun atur untuk harga satu

Cukup terkenal apabila tweet mengenai susun atur Flexbox mendapat 8K suka di Twitter!

4 susun atur untuk harga 1, terima kasih Flex?

css`
bentuk {
Paparan: Flex;
Flex-Wrap: Bungkus;

&> input {
Flex: 1 1 10ch;
margin: .5rem;

& [type = "e -mel"] {
Flex: 3 1 30ch;
}
}
}
`

Lihat Sumber di Codepen? https: //t.co/q8h5ly2zie pic.twitter.com/y6hqxclilz

- Adam Argyle (@argyleink) 14 Januari 2020

Itulah "asli" CSS bersarang digunakan di sana juga, dengan mengandaikan bahawa kita mendapatnya pada satu ketika dan sintaks memegang.

Terdapat beberapa maklum balas bahawa kod itu tidak dapat dipertahankan. Saya tidak fikir begitu, bagi saya ia berkata:

• Semua input ini dibenarkan untuk mengecut dan berkembang
• Bahkan ada jarak di sekelilingnya
• Input e -mel mestilah tiga kali lebih besar daripada yang lain
• Sekiranya perlu membungkus, baik, bungkus.

Kes penggunaan yang hebat untuk Flexbox, yang merupakan mekanisme susun atur yang betul apabila anda tidak cuba untuk menjadi sangat tepat mengenai saiz segala -galanya.

Terdapat catatan blog (tiada garis besar? ‍♂️) dengan penjelasan yang lebih panjang.

Ini mengingatkan saya banyak susun atur foto penyesuaian Tim Van Damme di mana gambar meletakkan diri mereka dengan Flexbox. Mereka tidak sepenuhnya menyimpan nisbah aspek mereka, tetapi kebanyakannya mereka lakukan, terima kasih kepada fleksibiliti Flexbox.

Berikut adalah garpu yang menyeronokkan dari asal.

Ia seperti susun atur zillion untuk harga satu, dan hanya beberapa baris kod untuk boot.

Atas ialah kandungan terperinci Empat susun atur untuk harga satu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!