Panduan tentang cara membungkus item flex kedua di sekeliling item pertama dalam Tailwind CSS

Question

Saya mempunyai bekas fleksibel yang mengandungi dua item fleksibel. Item lentur pertama harus menentukan lebar bekas, dan item lentur kedua harus membalutnya. Saya menggunakan Tailwind CSS untuk penggayaan, tetapi saya tidak boleh mendapatkan reka letak yang saya mahukan.

Ini ialah kod semasa saya:

  

    
  
  
 
    
  


Saya cuba menggunakan w-2/3 untuk menetapkan lebar anak pertama, tetapi anak kedua masih menggunakan semua ruang yang ada dalam bekas. Bagaimanakah saya harus membuat balut item flex kedua pada item pertama dan biarkan item pertama menentukan lebar bekas? 

Terima kasih banyak atas sebarang bantuan atau bimbingan yang boleh anda berikan! Terima kasih terlebih dahulu! 

            

Answer 1

Saya tidak pasti saya memahami sepenuhnya masalah anda, tetapi inilah yang saya rasa penyelesaiannya:

• Pertama, untuk div anak pertama, gunakan lebar tetap, seperti w-56.
• Kemudian tambahkan kelas w-fit pada div induk.

<div class="w-fit flex flex-col">
  <div class="flex-initial w-56 bg-blue-500 p-4"> <!-- The first child -->
    <!-- Content of the first child -->
  </div>
  <div class="bg-red-500 p-4"> <!-- All the rest components wrap around it -->
    <!-- Content of the rest components -->
  </div>
</div>