Question

我有一个不起眼的导航菜单：

<div>
    <ul>
        <li><a href="/real-estate"><span>Real Estate &amp;&nbsp;Development</span></a></li>
        <li><a href="/new-business"><span>New &amp; Expanding Business</span></a></li>
        { … }
    </ul>
</div>

此菜单需要以下视觉属性：

通过在它们之间放置相等的空格而在其容器内水平分布的项目
项目中的文字可以换行以使项目占用更少的水平空间
所有文字都是垂直居中的。

我无法同时获得所有这三个。

此SCSS：

div > ul {
    display: flex;
    justify-content: space-between;

    > li {
        display: table;
        table-layout: fixed;
        word-wrap: break-word;

        > a {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
    }
}

...让我与垂直居中间隔很大，但是文字没有换行，所以物品溢出了容器：

如果我删除display: table内容：

div > ul {
    display: flex;
    justify-content: space-between;

    > li {
        // DELETED display: table;
        // DELETED table-layout: fixed;
        word-wrap: break-word;

        > a {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
    }
}

...然后我得到了很好的文本包装，但项目之间的间距全部关闭：

我已经尝试了很多CSS属性的其他组合，但没有什么比这两个更接近我了。 Here's a pen with my code.是否有任何咒语可以从菜单中获取我想要的所有内容？

编辑：我的笔现在包括使用另一个Flex容器而不是display：table-cell的第三次尝试。间距更好，但仍然不是很好。我想这可能只是归结为in this answer描述的文本包装宽度问题，我可能只需要对某些换行符进行硬编码或使用JavaScript。

编辑2 ：关于这一点的是，项目不是以设定的大小最大化。在我的第三次尝试中，包裹并最终大于包装文本宽度的那些不最终彼此相同。实际上space-between并没有做太多的事情，因为顶层的灵活项目正在填满整个空间;它们之间的空间是0px。

Answer 1

文本应该已经自动包装在flex项目中。它使用以下代码为我工作：

SCSS：

ul {
  padding: 0;
  list-style: none;
  display: flex;
  background-color: grey;
  height: 50px;
  align-items: center;
  justify-content: space-between;
  li {
    text-align: center;
    flex: 1;
  }
}

HTML：

<div>
    <ul>
        <li><a href="/real-estate"><span>Real Estate &amp;&nbsp;Development</span></a></li>
        <li><a href="/new-business"><span>New &amp; Expanding Business</span></a></li>
      <li><a href="/new-business"><span>New &amp; Expanding Business</span></a></li>
    </ul>
</div>

Fiddle

您可以使用justify-content调整项目之间的间距：

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

cssTricks page for Flexbox

您可以通过在flex-basis: 0; flex-grow: 1;元素上设置li来使商品的宽度相等。

Answer 2

在flex元素上使用table-cell代替a，然后将width: min-content放在其中的span ：

div > ul {
    display: flex;
    justify-content: space-between;

    > li > a {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;

        span {
            width: min-content;
        }
    }
}

你可能会获得比你通过这种方式讨价还价更多的文字包装，但你可以通过不间断的空格控制它。

是否可以使用包装文本收缩包装flex项目？

2 个答案: