时间戳

首页 > 解决方案 > flex 类不会改变 tailwindcss 中的显示

html - flex 类不会改变 tailwindcss 中的显示

问题描述

我正在添加弹性框，但它不工作不知道该怎么办......


<!-- parent div with flex class -->
<div class="text-center relative pb-8 md:pb-0 xs:w-80 sm:w-9/12 md:w-200 md:flex flex-wrap flex-row-reverse bg-gray-200 bg-opacity-70 xs:rounded mx-auto mt-4">
<!-- this two innner divs are not working with flex -->
<!-- first inner div -->
    <div class="max-w-full relative">
        <img class="rounded-t md:rounded-tl-none md:rounded-r object-cover w-full h-48 md:w-60" src="http://localhost:8000/storage/images/YAyHaL4An4IxSaMT8sc9mpUo1YkomUOWGc2waolr.png" alt="" srcset="">
    </div>
<!-- second inner div -->
    <div class="px-2 pt-2">
        <a href="">
            <h4 class="text-lg hover:text-red-500">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, voluptatibus.
            </h4>
        </a>
        <p class="text-sm pr-2">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt, asperiores odio. Expedita magnam corrupti explicabo fuga deserunt praesentium debitis sed consequuntur, alias asperiores, laboriosam unde eligendi molestiae vero delectus. Corrupti!
        </p>
        <span class="text-xs absolute bottom-1 left-3 text-gray-700">2021-feb-26</span>
    </div>
</div>

我还检查了浏览器它确实添加了样式。还是不知道怎么回事……

标签： htmlcssflexboxtailwind-css

解决方案

所以答案很简单！

始终检查 flex 容器中项目的宽度！

在这种情况下，第二个 divwidth超出了应有的范围，因此将其放置在下一行。

在这种情况下，添加一个类解决了我的问题：


@layers utilities {
    @responsive {
        .w-128 {
             width: 32rem;
        }
    }
}

在 html 中：

<!-- second inner div -->
    <div class="px-2 pt-2 md:w-128">

完成。

推荐阅读