顺风响应设计显示块不管

Question

我目前正在学习顺风。我试图在全屏但在较小的屏幕块中使这三个 div 内联。现在，无论如何它都是块。

<div {{ $attributes->merge(['class' => 'flex flex-col bg-white dark:bg-gray-800 rounded-lg shadow-xl']) }}>
    <div class="text-center items-center px-6 py-3 bg-gray-900 rounded-lg rounded-b-none space-x-12 ">
          <div class="sm:inline-flex block items-center">                
             <span class="leading-none text-sm font-semibold mr-2 mt-1 text-white">{{ $post->likes_count }}</span>
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6 text-white">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 5" />
             </svg> 
          </div>
    
          <div class="sm:inline-flex block items-center">
             <span class="leading-none text-sm font-semibold mr-2 mt-1 text-white">{{ $post->comments_count }}</span>
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6 text-white">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" "/>
             </svg>   
          </div>
    
          <div class="sm:inline-flex block items-center">
             <span class="leading-none text-sm font-semibold mr-2 mt-1 text-white">{{ $post->reads }}</span>
             <svg class="h-6 w-6 text-white" stroke="currentColor" viewBox="0 0 20 20">
                <path d=""></path>       
             </svg>        
          </div>   
       </div>
      </div>

如果我对文档的理解正确，您可以使用不带前缀的实用程序来定位移动设备。当前哪个是块，然后前缀更大的屏幕，目前是 sm:inline-flex，但现在，它以任何一种方式显示块，我到底在做什么？

Answer 1

一种方法是在这些屏幕尺寸的父元素上使用 flex 方向：


<div class="text-center items-center justify-center px-6 py-3 bg-gray-900 rounded-lg rounded-b-none space-x-12 flex flex-col md:flex-row">
    <div class="w-100 flex">
       <span class="leading-none text-sm font-semibold mr-2 mt-1 text-white">{{ $post->likes_count }}</span>
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6 text-white">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2 5" />
       </svg>
    </div>

    <div class="w-100 flex">
       <span class="leading-none text-sm font-semibold mr-2 mt-1 text-white">{{ $post->comments_count }}</span>
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6 text-white">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
       </svg>
    </div>

    <div class="w-100 flex">
       <span class="leading-none text-sm font-semibold mr-2 mt-1 text-white">{{ $post->reads }}</span>
       <svg class="h-6 w-6 text-white" stroke="currentColor" viewBox="0 0 20 20">
          <path d=""></path>
       </svg>
    </div>
 </div>

让我知道这是否有效。

顺风响应设计显示块不管

tailwind responsive design displaying block regardless

css

tailwind-css