Ausrichtung von Elementen mit css/flex

[Rolf B]

Hallo Wolfi,

der Abstand ist groß, weil space-around dafür sorgt, dass der verfügbare Leerraum gleichmäßig links und rechts je Flex-Kind verteilt wird. Bei 3 Kindern wird er also durch 6 geteilt und je 1/6 kommt vor und hinter die <p>.

Du kannst statt dessen justify-content:center nehmen, dann wird der Platz nur außerhalb verteilt und die <p> landen alle in der Mitte. Und denen gibst Du dann einen passenden Margin, damit 1em herauskommt (dazu hatte ich schon was geschrieben). Das musst Du nur so machen, dass der Margin in der senkrechten Darstellung nicht greift oder wieder überschrieben wird (ggf. brauchst Du ein !important), sonst funktioniert dort die zentrierte Ausrichtung nicht.

Allerdings möchte ich auch fragen, ob die 20% Breite des .horiz2verti Containers nötig sind. Die machen es nämlich unnötig kompliziert. Hast Du es schon mal mit inline-flex oder inline-block versucht? Dann wird der Container nämlich genau so groß wie gemäß Inhalt erforderlich. Die Zentrierung in .mittig machst Du dann über ein text-align:center auf dem .mittig Container. Fiddle

Rolf