如何在Tailwind CSS中使第二个flex项目环绕第一个项目？

laik7k3q 于 2023-08-09 发布在其他

关注(0)|答案(2)|浏览(87)

我有一个包含两个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项环绕第一个项，并让第一个项决定容器的宽度？

css

来源：https://stackoverflow.com/questions/76824608/how-to-make-the-second-flex-item-wrap-around-the-first-item-in-tailwind-css

2条答案

按热度按时间

2vuwiymt1#

我不完全确定你的意思，但据我所知，你希望第二个元素是其余的（但不是100%的可用空间？））

<div class="flex flex-wrap">
  <div class="flex-shrink-0 w-2/3 bg-blue-500 p-4">
    <!-- Content of the first child -->
  </div>
  <div class="flex-wrap flex-grow bg-red-500 p-4">
    <!-- Content of the rest components -->
  </div>
</div>

字符串
如果这不是你所需要的，你能提供某种形式的快速草图，使其更容易可视化，并帮助你进一步。

赞(0）回复(0）举报 2023-08-09

mepcadol2#

我不确定我是否完全理解你的问题，但我认为这是解决方案：

首先为第一个子元素div使用固定宽度，类似于w-56
然后给予父div一个w-fit类，并给其余组件的div

<!-- Just a parent div to better visualizethe output -->
<div class="w-screen h-screen p-8 grid  bg-black">
      <div class="w-fit h-fit bg-green-500 flex flex-col">
         parent flex will be also w-56
         <div class=" w-56 bg-blue-500"> <!-- The first child -->
         <!-- Content of the first child -->
           first w-56
         </div>
         <div class="bg-red-500  w-fit"> <!-- All the rest components wrap around it -->
         <!-- Content of the rest components -->
           second
         </div>
      </div> 
</div>

字符串
看看这里：https://play.tailwindcss.com/L59pb6yJAC

赞(0）回复(0）举报 2023-08-09

我来回答

如何在Tailwind CSS中使第二个flex项目环绕第一个项目？

2条答案

相关问题

热门标签

最新问答