Элементы Flexbox не должны расти
Я работаю с Flexbox и Tailwindcss.
У меня есть 2 ряда. В первом ряду 3 предмета, во втором ряду 1 предмет. По какой-то причине предмет во втором ряду немного больше предметов в первом ряду.
Что может быть здесь не так, я думаю, что-то с flexbox, потому что когда я удаляю класс flex, он подходит правильно. Но тогда предметы находятся не в одном ряду.
Я сделал фрагмент кода:
<!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>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" 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>