【发布时间】：2019-02-08 06:40:54
【问题描述】：
我正在与Flexbox 和Tailwindcss 合作。
我有 2 行。第一行有 3 项，第二行有 1 项。由于某种原因，第二行中的项目比第一行中的项目略大。
这里可能有什么问题我猜是 flexbox 的问题，因为当我删除 flex 类时，它会正确匹配。但随后该项目不在同一行。
我已经做了一个代码sn-p：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="container mx-auto">
<div class="flex w-full">
<div class="w-1/3 m-2">
<div class="max-w-sm relative cursor-pointer rounded overflow-hidden shadow-lg">
<div>
<img class="w-full cursor-pointer" src="https://tailwindcss.com/img/card-top.jpg">
<div class="px-6 py-4">
<div class="flex items-center">
<p class="font-bold text-xl">Name</p>
</div>
<p class="text-grey-darker text-base">
Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
</p>
</div>
</div>
<div class="px-6 py-4">
<span class="label-grey mr-2">13 °C ☀️️</span>
<span class="label-grey mr-2">12 km/h ????️</span>
<span class="label-grey">
<span class="center">
Netherlands
<img src="https://www.countryflags.io/nl/flat/16.png" style="max-width: none; height: min-content;" class="ml-1" width="16px" height="16px">
</span>
</span>
</div>
</div>
</div>
<div class="w-1/3 m-2">
<div class="max-w-sm relative cursor-pointer rounded overflow-hidden shadow-lg">
<div>
<img class="w-full cursor-pointer" src="https://tailwindcss.com/img/card-top.jpg">
<div class="px-6 py-4">
<div class="flex items-center">
<p class="font-bold text-xl">Name</p>
</div>
<p class="text-grey-darker text-base">
Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
</p>
</div>
</div>
<div class="px-6 py-4">
<span class="label-grey mr-2">13 °C ☀️️</span>
<span class="label-grey mr-2">12 km/h ????️</span>
<span class="label-grey">
<span class="center">
Netherlands
<img src="https://www.countryflags.io/nl/flat/16.png" style="max-width: none; height: min-content;" class="ml-1" width="16px" height="16px">
</span>
</span>
</div>
</div>
</div>
<div class="w-1/3 m-2">
<div class="max-w-sm relative cursor-pointer rounded overflow-hidden shadow-lg">
<div>
<img class="w-full cursor-pointer" src="https://tailwindcss.com/img/card-top.jpg">
<div class="px-6 py-4">
<div class="flex items-center">
<p class="font-bold text-xl">Name</p>
</div>
<p class="text-grey-darker text-base">
Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
</p>
</div>
</div>
<div class="px-6 py-4">
<span class="label-grey mr-2">13 °C ☀️️</span>
<span class="label-grey mr-2">12 km/h ????️</span>
<span class="label-grey">
<span class="center">
Netherlands
<img src="https://www.countryflags.io/nl/flat/16.png" style="max-width: none; height: min-content;" class="ml-1" width="16px" height="16px">
</span>
</span>
</div>
</div>
</div>
</div>
<div class="flex w-full">
<div class="w-1/3 m-2">
<div class="max-w-sm relative cursor-pointer rounded overflow-hidden shadow-lg">
<div>
<img class="w-full cursor-pointer" src="https://tailwindcss.com/img/card-top.jpg">
<div class="px-6 py-4">
<div class="flex items-center">
<p class="font-bold text-xl">Name</p>
</div>
<p class="text-grey-darker text-base">
Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
</p>
</div>
</div>
<div class="px-6 py-4">
<span class="label-grey mr-2">13 °C ☀️️</span>
<span class="label-grey mr-2">12 km/h ????️</span>
<span class="label-grey">
<span class="center">
Netherlands
<img src="https://www.countryflags.io/nl/flat/16.png" style="max-width: none; height: min-content;" class="ml-1" width="16px" height="16px">
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>【问题讨论】：
标签： html css flexbox tailwind-css