Tailwind 与 Flex 对齐（顶部、中心、底部）
[英]Tailwind align with Flex (Top, Center, Bottom)
问题描述
I would like to build the following in a container using tailwind.
我想使用顺风在容器中构建以下内容。 Unfortunately I haven't found a good solution yet.不幸的是，我还没有找到一个好的解决方案。 Maybe someone knows more.也许有人知道更多。
<div class="bg-blue-200 h-48 flex px-8">
<div class="flex items-top">1</div>
<div class="flex items-center">2</div>
<div class="flex items-end">3</div>
</div>
In the div heading1 one should be at top, heading2 center and heading3 at bottom.在 div 标题 1 中，应该在顶部，标题 2 居中，标题 3 在底部。
2 个解决方案
解决方案1
1 已采纳 2021-12-10 13:25:30
You should use 'flex-col' class.你应该使用'flex-col' class。
<div class="flex flex-col">
<div class="flex mb-1 bg-blue-200 py-5">Heading 1</div>
<div class="flex mb-1 bg-blue-200 py-5">Heading 2</div>
<div class="flex mb-1 bg-blue-200 py-5">Heading 3</div>
</div>
Demo: https://play.tailwindcss.com/hDdf1puPXP?size=1260x720演示： https://play.tailwindcss.com/hDdf1puPXP?size=1260x720
解决方案2
1 2021-12-10 14:56:42
This is my proposition with flex flex-col items-center justify-center and custom bg-[colors] and a little white space ( padding,margin ).这是我对flex flex-col items-center justify-center和自定义bg-[colors]和一点空白（ padding,margin ）的提议。 Built with tailwindcss用tailwindcss构建
<,DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1:0" /> <script src="https.//cdn.tailwindcss:com"></script> </head> <body class="bg-[#C3C3C3]"> <div class="flex flex-col items-start justify-center h-screen text-transform: uppercase text-4xl text-white gap-40 ml-10" > <div class="bg-[#898989] py-5 h-20 w-96 pl-5">Heading1</div> <div class="bg-[#898989] py-5 h-20 w-96 pl-5">Heading2</div> <div class="bg-[#898989] py-5 h-20 w-96 pl-5">Heading3</div> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.