Tajuk ditulis semula sebagai: Menggunakan Flexbox untuk mencapai pemusatan elemen mendatar dan menegak
P粉748218846
2023-08-20 13:00:18
<p>Cara memusatkan div secara mendatar dan menegak dalam bekas menggunakan flexbox. Dalam contoh di bawah, saya mahu setiap nombor dipusatkan di bawah (baris demi baris). </p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">.flex-container {
padding: 0;
margin: 0;
gaya senarai: tiada;
paparan: flex;
align-item: tengah;
justify-content: pusat;
}
baris {
lebar: 100%;
}
.flex-item {
latar belakang: tomato;
padding: 5px;
lebar: 200px;
ketinggian: 150px;
jidar: 10px;
ketinggian garis: 150px;
warna: putih;
font-weight: tebal;
saiz fon: 3em;
text-align: tengah;
}</pre>
<pre class="brush:html;toolbar:false;"><div class="flex-container">
<div class="row">
<span class="flex-item">1</span>
</div>
<div class="row">
<span class="flex-item">2</span>
</div>
<div class="row">
<span class="flex-item">3</span>
</div>
<div class="row">
<span class="flex-item">4</span>
</div>
</div></pre>
<p><br /></p>
<p>http://codepen.io/anon/pen/zLxBo</p>
Cara memusatkan elemen secara menegak dan mendatar dalam Flexbox
Di bawah ialah dua penyelesaian pemusatan biasa.
Item fleksibel untuk penjajaran menegak (
flex-direction: column
),另一种用于水平对齐的弹性项目(flex-direction: row
).Dalam kedua-dua kes, ketinggian div berpusat boleh berubah-ubah, tidak ditentukan, tidak diketahui, tidak penting.
Berikut ialah kod HTML untuk kedua-duanya:
CSS (tidak termasuk gaya hiasan)
Apabila item fleksibel disusun secara menegak:
Demo
Apabila item fleksibel disusun secara mendatar:
Laraskan
flex-direction
peraturan dalam kod di atas.Demo
Pusat kandungan item flex
SkopKonteks pemformatan yang fleksibel terhad kepada hubungan ibu bapa-anak. Keturunan bekas lentur melebihi anak-anaknya tidak mengambil bahagian dalam susun atur lentur dan akan mengabaikan sifat lentur. Pada asasnya, sifat elastik tidak boleh diwarisi di luar kanak-kanak.
Jadi anda sentiasa perlu memohon
display: flex
或display: inline-flex
pada elemen induk untuk menerapkan sifat flex pada elemen anak.Untuk memusatkan teks atau kandungan lain secara menegak dan/atau mendatar, jadikan item sebagai bekas lentur (bersarang) dan ulangi peraturan pemusatan.
Untuk butiran lanjut lihat: Bagaimana untuk menjajarkan teks secara menegak dalam flexbox?
Sebagai alternatif, anda boleh menggunakan
margin: auto
pada elemen kandungan item fleksibel.Ketahui lebih lanjut tentang margin flex
auto
di sini: Cara Menjajarkan Item Flex (lihat kotak #56).Item fleksibel berbilang baris berpusat
Apabila bekas flex mempunyai berbilang baris (kerana pembalut garisan),
align-content
sifat akan menjadi penting untuk penjajaran paksi silang.Dari spec:
Untuk butiran lanjut lihat: Bagaimanakah flex-wrap berfungsi dengan align-self, align-item dan align-content?
Sokongan pelayar
Flexbox disokong dalam semua pelayar utama, kecuali IE < Beberapa versi penyemak imbas terbaharu, seperti Safari 8 dan IE10, memerlukan awalan vendor. Untuk menambah awalan dengan cepat, anda boleh menggunakan Autoprefixer. Lihat jawapan ini untuk butiran lanjut.
Memusatkan penyelesaian untuk pelayar lama
Untuk penyelesaian pemusatan alternatif menggunakan jadual CSS dan sifat kedudukan, lihat jawapan ini: https://stackoverflow.com/a/31977476/3597276
Saya rasa apa yang anda mahukan ialah perkara berikut.