Flexbox Tailwind CSS 内联块不起作用

Question

我正在使用 Tailwind CSS 并尝试创建一个导航栏，将我的社交页面链接显示为所有设备尺寸的内联块，并在移动设备上对齐每个项目，但它最终成为一个块项目.我将 flex 应用于链接容器，添加了 justify-around 然后 inline-block 到 ul，但它没有识别 inline-block。这是因为我使用的 flex 对象的嵌套结构吗？

这是一个视觉示例：

需要内联块

在移动设备上的预期结果

这是我所指的代码：

{{!-- Container - Social Pages --}}
<div class="flex flex-row md:items-center justify-around border-solid border-4 border-purple-600">
    <ul class="inline-block border-solid border-4 border-teal-600">
        {{#if @site.facebook}}
        <li class="px-2"><a href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="noopener">{{> icons/facebook}}</a></li>
        {{/if}}
        {{#if @site.twitter}}
        <li class="px-2"><a href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">{{> icons/twitter}}</a></li>
        {{/if}}
        <li class="px-2"><a href="https://feedly.com/i/subscription/feed/{{@site.url}}/rss/" title="RSS" target="_blank" rel="noopener">{{> "icons/rss"}}</a></li>
    </ul>
</div>

这里是完整的代码：

{{!-- Navigation Container - Logo, Links, Mobile Menu --}}
<nav class="lg:flex lg:flex-wrap lg:items-center lg:justify-between border-solid border-4 border-blue-600">
    {{!-- Container - Logo and Mobile Menu --}}
    <div class="flex justify-between border-solid border-2 border-red-500">
        {{!-- Logo --}}
        <div class="border-solid border-4 border-gray-400">
            <a class="#" href="{{@site.url}}">
                {{#if @site.logo}}
                    <img src="{{@site.logo}}" alt="{{@site.title}}" class="w-50 h-50" />
                {{else}}
                    {{@site.title}}
                {{/if}}
            </a>
        </div>
        {{!-- Mobile Menu Button --}}
        <div class="flex items-center border-solid border-4 border-green-600 lg:hidden">
            <button class="mobile-menu px-3 py-2 border rounded text-red-200 border-blue-400">
            <p>Menu</p>
            </button>
        </div>
    </div>
    {{!-- Container - Links and Social Pages --}}
    <div class="md:flex md:items-center nav-links border-solid border-4 border-black-400">
        {{!-- Container - Links --}}
        <div class="md:inline-block border-solid border-4 border-yellow-600">
            {{navigation}}
        </div>
        {{!-- Container - Social Pages --}}
        <div class="flex flex-row md:items-center justify-around border-solid border-4 border-purple-600">
            <ul class="inline-block border-solid border-4 border-teal-600">
                {{#if @site.facebook}}
                <li class="px-2"><a href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="noopener">{{> icons/facebook}}</a></li>
                {{/if}}
                {{#if @site.twitter}}
                <li class="px-2"><a href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">{{> icons/twitter}}</a></li>
                {{/if}}
                <li class="px-2"><a href="https://feedly.com/i/subscription/feed/{{@site.url}}/rss/" title="RSS" target="_blank" rel="noopener">{{> "icons/rss"}}</a></li>
            </ul>
        </div>
    </div>
</nav>

Answer 1

为什么不保留.flex 并添加.justify-between

.flex.w-full.justify-between 应该可以完成这项工作

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

{{!-- Navigation Container - Logo, Links, Mobile Menu --}}
<nav class="lg:flex lg:flex-wrap lg:items-center lg:justify-between border-solid border-4 border-blue-600">
{{!-- Container - Logo and Mobile Menu --}}
<div class="flex justify-between border-solid border-2 border-red-500">
    {{!-- Logo --}}
    <div class="border-solid border-4 border-gray-400">
        <a class="#" href="{{@site.url}}">
            {{#if @site.logo}}
                <img src="{{@site.logo}}" alt="{{@site.title}}" class="w-50 h-50" />
            {{else}}
                {{@site.title}}
            {{/if}}
        </a>
    </div>
    {{!-- Mobile Menu Button --}}
    <div class="flex items-center border-solid border-4 border-green-600 lg:hidden">
        <button class="mobile-menu px-3 py-2 border rounded text-red-200 border-blue-400">
        <p>Menu</p>
        </button>
    </div>
</div>
{{!-- Container - Links and Social Pages --}}
<div class="md:flex md:items-center nav-links border-solid border-4 border-black-400">
    {{!-- Container - Links --}}
    <div class="md:inline-block border-solid border-4 border-yellow-600">
        {{navigation}}
    </div>
    {{!-- Container - Social Pages --}}
    <div class="flex flex-row md:items-center justify-around border-solid border-4 border-purple-600">
        <ul class="flex w-full justify-between border-solid border-4 border-teal-600">
            {{#if @site.facebook}}
            <li class="px-2"><a href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="noopener">{{> icons/facebook}}</a></li>
            {{/if}}
            {{#if @site.twitter}}
            <li class="px-2"><a href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">{{> icons/twitter}}</a></li>
            {{/if}}
            <li class="px-2"><a href="https://feedly.com/i/subscription/feed/{{@site.url}}/rss/" title="RSS" target="_blank" rel="noopener">{{> "icons/rss"}}</a></li>
        </ul>
    </div>
</div>
</nav>