Flexbox 项目不应该增长
Posted
技术标签:
【中文标题】Flexbox 项目不应该增长【英文标题】：Flexbox items should not grow 【发布时间】：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" >
</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" >
</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" >
</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" >
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>【问题讨论】：
【参考方案1】：使用<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" >
</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" >
</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" >
</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" >
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>【讨论】：
以上是关于Flexbox 项目不应该增长的主要内容，如果未能解决你的问题，请参考以下文章