Hallo Walter,
wie Dir vielleicht aufgefallen ist, ist der Abstand zwischen A und B anders als der Abstand zwischen den übrigen Spans. Das liegt am Zeilenumbruch zwischen den ersten beiden Spans, der als Whitespace sichtbar bleibt. Das ist bei einem inline-Flow einfach so.
Ich würde Dir eher raten, für .alphabet display:flex zu setzen, die Größe der Buchstabenzellen mit flex-basis festzulegen und den Buchstaben darin mit text-align:center zu zentrieren. Andernfalls sind die spans für I und M sehr unterschiedlich breit.
div.alphabet {
margin-inline: auto;
width: fit-content;
border: 2px solid red;
display: flex;
padding: 0.1em 0;
span {
color:red;
flex: 0 0 1.5em;
text-align: center;
}
}
Je nach Font mag es sein, dass die flex-Basis (Parameter 3 der flex-Eigenschaft) nicht ausreicht, das musst Du in den Entwicklerwerkzeugen kontrollieren. Ein M, das anderthalbmal so breit wie hoch ist, ist aber selten.
Ob Du .alphabet mit padding versehen willst, hängt von deinem Layout ab. Ich fand es ohne padding ziemlich gedrängt.
Sodann solltest Du darüber nachdenken, was passieren soll, wenn dein Bildschirm zu schmal ist, um alle Buchstaben nebeneinander zu stellen. Ist das div.alphabet so breit wie der Body? Oder ist da noch etwas daneben? Davon hängt ab, ob man eine @media- oder @container-Abfrage machen sollte.
Mit Container sieht es so aus
Es wäre gerade für diesen Einsatzzweck wirklich GROẞARTIG, wenn das flex-wrap:balanced-Thema endlich mal aus dem Quark käme. Spec- und Implementierungsmäßig. Tab Atkins schlug es schon 2018 vor, aber in den Spec-Drafts ist es noch nicht drin. Ian Kilpatrick von Google (bfgeek) schrieb, er hätte für Blink was in der Pipeline und fast fertig, ich bin sehr gespannt.
Rolf
--
sumpsi - posui - obstruxi
nicht angemeldet
Matthias Scharwies
Gunnar Bittersmann
Rolf B
JürgenB
Tabellenkalk
MudGuard
Der Martin
Auge
