moin,
Code Darstellung:
.cm-header {
position: relative;
display: flex;
flex-flow: row;
}
<!-- Flex Kontainer -->
<span class="cm-header">
<!-- Flex-Element before: -->
<!-- Flex-Element Überschrift -->
<!-- Flex-Element after: -->
</span>
Meine Absicht:
- Ich möchte das Flex-Element
.cm-header::after
mittext-valign: baseline;
auf einer horizontalen Linie zum Flex-Element.cm-header
ausrichten. - Ich möchte mit
.cm-header::after
ein quadratische Fläche definieren, welches sich zur Text höhe des.cm-header
-Element orientiert.
Mein Problem:
text-valign
-Property funzt irgend wie nicht 😕- Das auslesen von der Text höhe des
.cm-header
s krige ich nicht auf die kette 😕.
Meine Frage:
- Wie krige ich die dynamische Höhe des Textes im
.cm-header
-Element raus, sodass ich dann mit der dynamischen höhe des Textes eine quadratische größe des.cm-header::after
-Element definieren kann. - Wie kann man
.cm-header::after
-Element vertikal zur.cm-header
ausrichten wenn nicht durchtext-valign: baseline;
oder geht das mit Kniffen doch 😃???
Meine provisorische Lösung:
Ich habe eine leider eine fixe Breite in px
und eine dynamische Höhe 1em
des .cm-header::after
-Elementes zur der dazugehörigen .cm-header
-Element verwendet.
Ich habe mit display: inline-block;
des .cm-header::after
-Elementes gearbeitet, sodass die vertikale Zentrierung des .cm-header::after
-Elementes zum .cm-header
-Element einiger Maße ok ist, leider aber nicht zum Text der .cm-header
-Element selbst 😕.
Mein Ziel:
Durch die Veränderung der Breite des Viewports ordnen sich die Flex-Elemente über @media
in der Reihenfoge anders an.
lgmb
--
Sprachstörung, Verpeilter, Begriffs-Verwechseler
Sprachstörung, Verpeilter, Begriffs-Verwechseler