Элементы Flexbox не должны расти - PullRequest
Новая
       20

Элементы Flexbox не должны расти

0 голосов
/ 03 сентября 2018

Я работаю с 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 Ответ

0 голосов
/ 03 сентября 2018

Использование <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>
...