16.05.2016, 14:36
|
|||
|
|||
Flexboxen und Margins
Hallo Ihr,
beim Entwerfen eines Seitenlayouts ist mir gerade aufgefallen, dass, wenn ich Flexboxen verwende, mir die Margins nicht mehr gehorchen. Vielleicht mögt Ihr Euch das mal anschauen? Man nehme folgendes Layout: HTML-Code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Beispiel</title> <style> header,nav,article,aside,footer {border-radius:5px;border:1px solid silver;margin:5px;padding:10px;} </style> </head> <body> <header>header header header</header> <nav>nav nav nav nav nav nav</nav> <main> <article><p>article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article article</p></article> <aside><p>aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside</p></aside> </main> <footer>footer footer footer</footer> </body> </html> Kaum füge ich jedoch im CSS eine Zeile hinzu, um die <main> zur Flexbox zu machen... HTML-Code:
... <style> header,nav,article,aside,footer {border-radius:5px;border:1px solid silver;margin:5px;padding:10px;} main {display:flex;flex-direction:row;} </style> ... Gut, ich weiß zwar, wie man das gerade gebogen bekommt, aber interessieren würde mich schon, ob ich einen Denk- oder der Browser (Safari und Firefox) einen Parsing-Fehler macht. Ich freue mich auf Eure Antworten. Beste Grüße compukortschnoi Geändert von compukortschnoi (16.05.2016 um 14:38 Uhr) 
|
| Sponsored Links |
|
17.05.2016, 09:41
|
|||
|
|||
|
Was macht denn Flexbox überhaupt? Wenn du dir darüber mal Gedanken machst, dann weißt du vielleicht auch, woher die Abstände herkommen. Bzw. sehe ich hier keine "doppelten" Abstände, aber das wundert mich auch nicht im Geringsten.
Aber soweit kann ich dir sagen: Flexbox ist schon einige Jahre verfügbar, da machen die Browser keine Parsingfehler, wenn dann machen die User Anwendungsfehler.
|
| Sponsored Links |
|
18.05.2016, 19:19
|
|||
|
|||
|
Bitte verzeih, aber deine Antwort hilft mir nicht weiter. Du sprichst in Rätseln.
Vielleicht magst Du ein wenig konkreter werden, als mit mir "Ich weiß was, was Du nicht weißt" zu spielen... 
|
|
19.05.2016, 01:42
|
||||
|
||||
|
Ich habe Deine Beispiele nicht getestet, aber so wie Du das „Problem“ beschreibst, kann es sich nur um „collapsing margins“ handeln.
„display: flex“ verhindert das Kollabieren der Margins: https://drafts.csswg.org/css-flexbox/#item-margins .
|
|
19.05.2016, 08:09
|
|||
|
|||
|
Hallo Ihr beiden,
vielen Dank für Eure Antworten. Jetzt seh ich klarer! Beste Grüße compukortschnoi
|
 |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| overflow:auto im Universalselektor gegen collapsing margins? | Ave | CSS | 4 | 28.03.2010 16:07 |
| Problem mit Collapsing Margins | opa-rudi | CSS | 3 | 16.02.2009 22:18 |
| Collapsing Margins von benachbarten Elementen | matthias | CSS | 1 | 19.03.2008 19:08 |
| Margins Kollabieren einfach nicht | braindead | CSS | 2 | 24.12.2007 19:16 |
| layout und positionierung mit floats und negative margins | misfit | CSS | 1 | 02.10.2006 17:25 |
Linear-Darstellung
