Hallo
Ich sehe für die span-Elemente weder Sinn noch Bedarf. Also besser und übersichtlicher:
Code:
<ul>
<li>Item</li>
<li>Item</li>
<li>Item - much much much much more longer</li>
</ul>
Zunächst löscht du dein gesamtes Beispiel-CSS.
Dann, zu besseren Übersicht, zunächst die CSS-Angaben, die mit Flexbox nix zu tun haben:
Code:
body {
width: 70%;
}
li {
background: yellow;
color: blue;
text-align: center;
padding: 5px;
border: 1px solid #333;
}
Jetzt die CSS-Angaben, damit die Flex-Items (hier: die li-Elemente) die gesamte zur Verfügung stehende Breite füllen und gleich hoch werden:
Code:
ul {
display: flex;
}
li {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 1px;
}
Zum Schluß wird der Inhalt der li-Elemente noch mittels Flexbox zentriert:
Code:
li {
display: flex;
justify-content: center;
align-items: center;
}
Das gesamte CSS zusammengefaßt sieht dann folgendermaßen aus:
Code:
body {
width: 70%;
}
ul {
display: flex;
}
li {
background: yellow;
color: blue;
text-align: center;
padding: 5px;
border: 1px solid #333;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 1px;
display: flex;
justify-content: center;
align-items: center;
}
Gruss
MrMurphy