Bagaimanakah Saya Boleh Meletakkan Dua Div Bersebelahan Menggunakan CSS Flexbox?

Menempatkan Dua Div Bersebelahan dengan CSS

Dalam pembangunan web, keperluan timbul untuk meletakkan elemen sebelah menyebelah. Satu kaedah untuk mencapai ini dalam CSS ialah melalui flexbox.

Pendekatan Flexbox

Flexbox membolehkan anda meletakkan elemen dalam struktur seperti grid yang fleksibel. Untuk meletakkan dua div bersebelahan antara satu sama lain:

1. Tetapkan Bekas Induk kepada Flex: Tambah paparan: flex pada div induk. Ini membolehkan susun atur flexbox.
2. Tentukan Div Sempit: Untuk div yang sepatutnya lebarnya 200px, tetapkan lebarnya kepada 200px. Selain itu, anda boleh menggayakannya untuk tujuan keterlihatan.
3. Benarkan Div Kiri Mengisi Ruang Yang Selebihnya: Gunakan flex: 1 pada div yang tinggal. Sifat ini memberitahu penyemak imbas untuk mengembangkan div untuk menduduki baki ruang yang tersedia dalam bekas induk.

#parent {
  display: flex;
}
#narrow {
  width: 200px;
  background: lightblue;
}
#wide {
  flex: 1;
  background: lightgreen;
}

<div><p>Dengan mengikuti pendekatan ini, anda boleh meletakkan dua div sebelah menyebelah dengan mudah, dengan satu mempunyai lebar tetap dan satu lagi mengisi ruang skrin yang tinggal.</p></div>

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Meletakkan Dua Div Bersebelahan Menggunakan CSS Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!