¿Es posible encoger los elementos flexibles con un texto de envoltura dentro de ellos? - html, css, flexbox, centrado, pantalla

Tengo un menú de navegación sin pretensiones:

<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 menú necesita las siguientes propiedades visuales:

• Los artículos se distribuyen horizontalmente dentro de su contenedor al poner el mismo espacio entre ellos.
• El texto de los elementos puede ajustarse para que los elementos ocupen menos espacio horizontal
• Todo el texto está centrado verticalmente.

No puedo obtener los tres al mismo tiempo.

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 da un gran espacio con el centrado vertical, pero el texto no se ajusta, por lo que los elementos desbordan el contenedor:

Si borro el display: table cosas:

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

... luego obtengo un buen ajuste de texto, pero el espacio entre los elementos está desactivado:

He probado muchas otras combinaciones de propiedades CSS, pero nada me ha acercado más que estas dos. Aquí hay una pluma con mi código. ¿Hay algún conjuro que me dé todas las cosas que quiero de este menú?

EDITAR: Mi pluma ahora incluye un tercer intento que usaotro contenedor Flex en lugar de mostrar: table-cell. El espaciado es mejor, pero aún así no es genial. Supongo que esto puede reducirse al problema del ancho de ajuste de texto descrito en esta respuesta, y es posible que tenga que codificar algunos saltos de línea o usar JavaScript.

EDIT 2: Lo que pasa con eso, sin embargo, es que los elementos no están "maximizando" en un tamaño establecido. En mi tercer intento allí, los que se ajustan y terminan son más grandes que el ancho del texto ajustado no terminan el mismo tamaño el uno del otro. Y de hecho el space-between No está haciendo mucho por nada, porque los elementos de flexibilidad del nivel superior están ocupando todo el espacio; el espacio entre ellos es 0px.

Respuestas

0 para la respuesta № 1

Utilizar flex en lugar de table-cell sobre el a elementos, y luego poner width: min-content sobre el spans dentro de ellos:

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

Es posible que obtenga más ajuste de texto de lo que esperaba de esta manera, pero puede controlarlo con espacios sin interrupciones.

---

0 para la respuesta № 2

El texto ya debe ajustarse automáticamente dentro de los elementos flexibles. Me está funcionando con el siguiente 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>

Violín

Puede ajustar el espacio entre los elementos con justify-content:

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

Página de cssTricks para Flexbox

Puedes hacer que los artículos tomen el mismo ancho estableciendo flex-basis: 0; flex-grow: 1; sobre el li elementos.

---