css - Isu susun atur fleksibel

Question

Pengepala menggunakan susun atur fleksibel Saya mahu kotak carian dipusatkan secara mendatar Sama seperti reka letak dalam IOS asli, ia tidak dipengaruhi oleh kandungan di sebelah kiri dan kanan Saya masih ingat bahawa saya melaksanakannya sebelum ini, tetapi saya terlupa mengenainya selepas menggunakan flex.css. Mari lihat cara melaksanakannya

仅有的幸福 · Answer

.header{
    display:flex;
    flex-flow:row nowrap;
    align-item:center;
    justify-content:space-around;
}

Untuk mengetahui lebih lanjut mengenai susun atur Flex, sila lihat: http://www.ruanyifeng.com/blo...

阿神 · Answer

Hanya tiga elemen boleh disebarkan terus menggunakan ruang-antara

https://jsfiddle.net/straybug...

Anda mengemas kini kemudian

Tidak terjejas dengan kandungan di kiri dan kanan, masih melintang tengah

Oleh kerana ia tidak terjejas, satu-satunya cara adalah dengan mengekstrak yang mutlak dan kemudian memusatkannya.

https://jsfiddle.net/straybug...

伊谢尔伦 · Answer

Penggunaan terutamanya align-items: center
Ini adalah demo

我想大声告诉你 · Answer

Gunakan kedudukan mutlak untuk yang tengah Jika lebar kiri dan kanan berbeza, ia akan menjejaskan kedudukan tengah

.

.search {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}