搜尋

首頁  >  問答  >  主體

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

<p>我有一個包含兩個flex項目的flex容器。第一個flex項目應該確定容器的寬度,而第二個flex項目應該環繞在其周圍。我正在使用Tailwind CSS進行樣式設置,但是我無法獲得所需的佈局。 <br /><br />這是我目前的程式碼:</p><p><br /></p> <pre class="brush:html;toolbar:false;"><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> </pre> <p>我嘗試使用w-2/3來設定第一個子元素的寬度,但是第二個子元素仍然佔據了容器中所有可用的空間。我應該如何使第二個flex項目環繞在第一個項目周圍,並且讓第一個項目確定容器的寬度呢? <br /><br />非常感謝您提供的任何幫助或指導!先致謝! </p><p><br /></p>
P粉156983446P粉156983446485 天前467

全部回覆(1)我來回復

  • P粉402806175

    P粉4028061752023-08-03 00:51:32

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

    • #首先,對於第一個子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>

    回覆
    0
  • 取消回覆