Flexbox 项目不应该增长
Flexbox items should not grow
我正在与 Flexbox and Tailwindcss 合作。
我有 2 行。第一行有 3 项，第二行有 1 项。由于某种原因，第二行中的项目比第一行中的项目稍大。
这里可能有什么问题我猜是 flexbox 的问题，因为当我删除 flex class 时它会正确地适合。但是这些项目不在同一行。
我制作了一个代码片段：
<!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>
Use <div class="w-1/3 mt-2 p-2"> 表示应用 padding 和 margin-top 在第二行的 div 上面
<!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 flex-no-shrink 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 flex-no-shrink w-full">
<div class="w-1/3 mt-2 p-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>
我正在与 Flexbox and Tailwindcss 合作。
我有 2 行。第一行有 3 项，第二行有 1 项。由于某种原因，第二行中的项目比第一行中的项目稍大。
这里可能有什么问题我猜是 flexbox 的问题，因为当我删除 flex class 时它会正确地适合。但是这些项目不在同一行。
我制作了一个代码片段：
<!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>
Use <div class="w-1/3 mt-2 p-2"> 表示应用 padding 和 margin-top 在第二行的 div 上面
<!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 flex-no-shrink 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 flex-no-shrink w-full">
<div class="w-1/3 mt-2 p-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>