在Tailwind CSS中，如何將第二個flex專案環繞在第一個專案周圍的指南

Question

我有一個包含兩個flex項目的flex容器。第一個flex項目應該確定容器的寬度，而第二個flex項目應該環繞在其周圍。我正在使用Tailwind CSS進行樣式設置，但是我無法獲得所需的佈局。

這是我目前的程式碼：

<div class="flex flex-col">
  <div class="flex-initial w-2/3 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>

我嘗試使用w-2/3來設定第一個子元素的寬度，但是第二個子元素仍然佔據了容器中所有可用的空間。我應該如何使第二個flex項目環繞在第一個項目周圍，並且讓第一個項目確定容器的寬度呢？

非常感謝您提供的任何幫助或指導！先致謝！

Answer 1

我不確定我是否完全理解您的問題，但這是我認為的解決方案：

• #首先，對於第一個子div，使用固定寬度，例如w -56。
• 然後給父div添加一個w-fit類別。

#

<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>