如何解决Flexbox顺风:无法让子元素的宽度调整内容
我有此代码:
<div class = "flex-none flex-col bg-gray-500 border border-black rounded rounded p-5 ">
<div class=" border w-auto bg-gray-700 flex-none flex-col content-start justify-start ">
<div
class = "border border-red-200 w-auto inline-block flex flex-row content-start
justify-start bg-gray-900 cursor-pointer hover:bg-gray-700
border rounded border-black p-2 mt-2 ">
A
</div>
<div
class = "border border-red-200 w-auto inline-block flex flex-row content-start
justify-start bg-gray-900 cursor-pointer hover:bg-gray-700
border rounded border-black p-2 mt-2 ">
B
</div>
<div
class = "border border-red-200 w-auto inline-block flex flex-row content-start
justify-start bg-gray-900 cursor-pointer hover:bg-gray-700
border rounded border-black p-2 mt-2 ">
C
</div>
</div>
</div>
它看起来像这样:
我希望它像这样调整宽度到内容大小:
解决方法
在父容器上使用inline-flex
而不是flex
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<div class="flex-none flex-col bg-gray-500 border border-black rounded rounded p-5 ">
<div class=" border w-auto bg-gray-700 flex-none inline-flex flex-col content-start justify-start ">
<div class="border border-red-200 w-auto inline-block flex flex-row content-start width-auto
justify-start bg-gray-900 cursor-pointer hover:bg-gray-700
border rounded border-black p-2 mt-2 text-white ">
A
</div>
<div class="border border-red-200 w-auto inline-block flex flex-row content-start
justify-start bg-gray-900 cursor-pointer hover:bg-gray-700
border rounded border-black p-2 mt-2 text-white ">
B
</div>
<div class="border border-red-200 w-auto inline-block flex flex-row content-start
justify-start bg-gray-900 cursor-pointer hover:bg-gray-700
border rounded border-black p-2 mt-2 text-white ">
C
</div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。