Einzelnen Beitrag anzeigen
  #4 (permalink)  
Alt 20.02.2017, 11:27
MrMurphy MrMurphy ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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

Geändert von MrMurphy (20.02.2017 um 12:22 Uhr)
Mit Zitat antworten