Penjana Flexbox

Cara ia berfungsi

Flexbox tidak rumit, tetapi satu perkara tentangnya menjerat hampir semua orang: justify-content dan align-items tidak bermaksud mendatar dan menegak. Ia bermaksud sepanjang arah dan merentasinya, dan arah itu ialah sesuatu yang anda tetapkan.

Perangkap, dinyatakan secara langsung

Dengan flex-direction: row, justify-content berfungsi secara mendatar dan align-items secara menegak. Tukar kepada column dan kedua-duanya bertukar sepenuhnya. Setiap jam yang hilang kepada flexbox pada asasnya ialah ini. Penjelasan di bawah dikemas kini apabila anda menukar arah supaya hubungan itu kelihatan dan bukannya dihafal.

Paksi utama dan paksi silang

Paksi utama ialah yang dilalui item, ditetapkan oleh flex-direction. Paksi silang berserenjang dengannya. justify-content mengagihkan ruang sepanjang paksi utama; align-items meletakkan item pada paksi silang. Sebaik sahaja dua nama itu melekat, yang lain mengikutinya.

gap, dan mengapa ia menggantikan margin

gap meletakkan ruang antara item tanpa menambahnya di luar yang pertama dan terakhir, iaitu apa yang margin lakukan dengan salah dan apa yang dahulu dibetulkan orang dengan helah :last-child. Ia disokong dalam setiap pelayar semasa dan tiada lagi sebab untuk mengelakkannya.

nowrap bermaksud mengecil, bukan melimpah

Lalainya ialah nowrap, dan item mengecil di bawah saiz semula jadinya untuk muat dan bukannya berpindah ke baris baharu. Itulah sebabnya teks kadangkala tertekan tanpa dijangka dalam baris flex. Menetapkan wrap membolehkan item turun sebaliknya; min-width: 0 pada anak menghalangnya mengecil melepasi kandungannya.

Memusatkan dalam kedua-dua arah

justify-content: center dengan align-items: center memusatkan item dalam kedua-dua arah tanpa mengira flex-direction, iaitu satu gabungan yang berbaloi dihafal sepenuhnya.