É possível reduzir os itens flexíveis com o texto de quebra dentro deles? - html, css, flexbox, centragem, exibição

Tenho um menu de navegação despretensioso:

<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>

Este menu precisa das seguintes propriedades visuais:

• Itens distribuídos horizontalmente dentro de seu contêiner, colocando espaço igual entre eles
• O texto nos itens pode ser quebrado para fazer com que os itens ocupem menos espaço horizontal
• Todo o texto é centralizado verticalmente.

Não consigo obter todos os três ao mesmo tempo.

Este 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;
}
}
}

… Me dá um ótimo espaçamento com centralização vertical, mas o texto não quebra, então os itens transbordam do contêiner:

Se eu excluir o display: table coisa:

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;
}
}
}

... então consigo uma boa quebra automática de texto, mas o espaçamento entre os itens está todo errado:

Eu tentei muitas outras combinações de propriedades CSS, mas nada me aproximou mais do que essas duas. Aqui está uma caneta com meu código. Existe algum encantamento que me trará todas as coisas que eu quero deste menu?

EDITAR: Minha caneta agora inclui uma terceira tentativa que usaoutro contêiner Flex em vez de display: table-cell. O espaçamento é melhor, mas ainda não ótimo. Acho que isso pode se resumir ao problema de largura de quebra de texto descrito nesta resposta, e posso apenas ter que codificar algumas quebras de linha ou usar JavaScript.

EDIT 2: O problema com isso, porém, é que os itens não estão atingindo o tamanho máximo em um tamanho definido. Na minha terceira tentativa lá, aqueles que envolvem e acabam maiores do que a largura do texto embalado não acabam do mesmo tamanho. E de fato o space-between não está fazendo muita coisa, porque os itens flexíveis de nível superior estão preenchendo todo o espaço; o espaço entre eles é de 0 px.

Respostas:

0 para resposta № 1

Usar flex ao invés de table-cell no a elementos e, em seguida, colocar width: min-content no spanestá dentro deles:

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;
}
}
}

Você pode obter mais quebra de texto do que esperava dessa forma, mas pode controlar isso com espaços ininterruptos.

---

0 para resposta № 2

O texto já deve quebrar automaticamente dentro dos itens flex. Ele está funcionando para mim com o seguinte código:

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>

Violino

Você pode ajustar o espaçamento entre os itens com justify-content:

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

página cssTricks para Flexbox

Você pode fazer com que os itens tenham a mesma largura configurando flex-basis: 0; flex-grow: 1; no li elementos.

---