Bagaimana anda menyelaraskan item secara mendatar dan menegak dalam bekas Flexbox?

Bagaimana anda menyelaraskan item secara mendatar dan menegak dalam bekas Flexbox?

Untuk menyelaraskan item dalam bekas Flexbox baik secara mendatar dan menegak, anda perlu memahami model susun atur Flexbox, yang direka untuk menyediakan cara yang lebih berkesan untuk meletakkan, menyelaraskan, dan mengedarkan ruang di antara item dalam bekas, walaupun saiz mereka tidak diketahui dan/atau dinamik.

Penjajaran mendatar:
Penjajaran mendatar dalam Flexbox diuruskan oleh harta justify-content yang digunakan untuk bekas. Harta ini boleh mengambil beberapa nilai:

• flex-start : Item dibungkus ke arah permulaan paksi utama.
• flex-end : Item dibungkus ke arah akhir paksi utama.
• center : Item berpusat di sepanjang paksi utama.
• space-between : item diedarkan secara merata dalam talian; Item pertama adalah pada baris permulaan, item terakhir pada baris akhir.
• space-around : Item diedarkan sama rata dengan ruang yang sama di sekelilingnya.
• space-evenly : Item diedarkan supaya jarak antara mana-mana dua subjek penjajaran bersebelahan, sebelum subjek penjajaran pertama, dan selepas subjek penjajaran terakhir adalah sama.

Penjajaran menegak:
Penjajaran menegak dikawal oleh harta benda align-items , yang digunakan untuk bekas. Harta ini mempengaruhi paksi silang (menegak, jika paksi utama adalah mendatar). Nilai yang mungkin adalah:

• stretch (default): Items are stretched to fill the container's cross axis.
• flex-start : Item diletakkan pada permulaan paksi salib.
• flex-end : Item diletakkan di hujung paksi salib.
• center : Item berpusat di paksi salib.
• baseline : Item diselaraskan sedemikian rupa sehingga garis dasar mereka menyelaraskan.

Sebagai contoh, untuk memusatkan item baik secara mendatar dan menegak dalam bekas Flexbox, anda boleh menggunakan CSS berikut:

 <code class="css">.container { display: flex; justify-content: center; /* horizontal alignment */ align-items: center; /* vertical alignment */ }</code>

Apakah perbezaan antara 'saksi-kandungan' dan 'menyelaraskan-item' dalam Flexbox?

justify-content dan align-items dalam Flexbox digunakan untuk penjajaran, tetapi mereka mengawal paksi penjajaran yang berbeza:

• Justify-Content : Harta ini digunakan untuk menyelaraskan item flex di sepanjang paksi utama bekas Flexbox. Paksi utama adalah mendatar secara lalai (kiri ke kanan) tetapi boleh diubah menjadi menegak jika harta flex-direction ditetapkan ke column . Ia memberi kesan kepada pengagihan ruang antara dan sekitar item flex.
• Align-items : Harta ini menjajarkan item flex di sepanjang paksi silang bekas. Paksi salib berserenjang dengan paksi utama, jadi ia menegak secara lalai (atas ke bawah) tetapi menjadi mendatar jika flex-direction ditetapkan ke column . Ia memberi kesan kepada bagaimana item diselaraskan dari segi ketinggian mereka dalam paksi silang.

Ringkasnya, justify-content berkaitan dengan pengedaran dan penjajaran item pada paksi utama, sedangkan align-items berkaitan dengan penjajaran di sepanjang paksi salib.

Bagaimana anda boleh memusatkan satu item secara mendatar dan menegak dalam bekas Flexbox?

Untuk memusatkan satu item secara mendatar dan menegak dalam bekas Flexbox, anda boleh menggunakan sifat CSS berikut pada bekas:

 <code class="css">.container { display: flex; justify-content: center; /* Centers the item horizontally */ align-items: center; /* Centers the item vertically */ height: 100vh; /* Optional: Sets a height for the container */ }</code>

Inilah pecahan apa yang dilakukan oleh setiap harta:

• display: flex; Menetapkan bekas untuk menggunakan susun atur Flexbox.
• justify-content: center; Sejajar item flex di tengah paksi utama (secara mendatar, jika paksi utama adalah mendatar).
• align-items: center; Menyelaraskan item flex di tengah paksi salib (secara menegak, jika paksi silang menegak).

height: 100vh; adalah pilihan dan digunakan untuk menetapkan bekas ke ketinggian penuh Viewport, memastikan kesan berpusat dapat dilihat di seluruh skrin.

Ciri -ciri Flexbox mana yang harus digunakan untuk menyelaraskan item pada akhir bekas?

Untuk menyelaraskan item di hujung bekas Flexbox, anda perlu mempertimbangkan kedua -dua paksi utama dan paksi salib:

Paksi utama (penjajaran mendatar):

• Gunakan justify-content: flex-end; untuk menyelaraskan item pada akhir paksi utama. Jika paksi utama adalah mendatar (lalai), ini akan menyelaraskan item di sebelah kanan bekas.

Salib paksi (penjajaran menegak):

• Gunakan align-items: flex-end; untuk menyelaraskan item pada akhir paksi salib. Jika paksi salib adalah menegak (lalai), ini akan menyelaraskan item ke bahagian bawah bekas.

Berikut adalah contoh bagaimana untuk menyelaraskan item ke bahagian bawah kanan Flexbox:

 <code class="css">.container { display: flex; justify-content: flex-end; /* Aligns items to the right */ align-items: flex-end; /* Aligns items to the bottom */ }</code>

Dengan menggunakan justify-content: flex-end; dan align-items: flex-end; , anda boleh meletakkan item flex pada akhir kedua-dua paksi utama dan salib, mengakibatkan penjajaran di sudut kanan bawah bekas.

Atas ialah kandungan terperinci Bagaimana anda menyelaraskan item secara mendatar dan menegak dalam bekas Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!