Flexbox Tailwind CSS内联块不工作

Question

我正在使用Tailwind CSS，并试图创建一个导航栏，它将我的社交页面链接显示为所有设备大小的内联块，并在移动设备上围绕每个项目进行对齐，但它最终是一个块项目。我将flex应用于链接容器，向ul添加了justify- and，然后添加了inline-block，但它无法识别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.retify-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>

​