Einzelnen Beitrag anzeigen
  #4 (permalink)  
Alt 05.01.2017, 20:45
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

Zitat:
1. Nach meiner Rechnung ist das 2., 3., 4. Element betroffen. Warum gerade das 4. nicht?
Die Angabe sorgt für einen größeren unteren Abstand, damit die Zuordnung von label zu input durch den geringen Abstand deutlich wird.

Ein Abstand unter dem 4. Element gefällt mir optisch nicht. Die farbige Fläche unter dem 4. Element wäre sonst deutlich größer als über dem 1. Element.

Wie schon geschrieben kannst du den natürlich so anpassen wie es dir am Besten gefällt.

Zitat:
2. Ich sehe zwischen @media only screen and min-width: 400px bzw. min-width: 600px keinen Unterschied in der Darstellung. Was ist das Geheimnis?
Benutzt du vielleicht den Opera? Der läßt sich zumindest bei mir nicht unter 400px (bzw. jetzt 500px) zusammenschieben.

Für ein kleines Fallback habe ich die Vorgehensweise Mobile First gewählt.

Zunächst befinden sich label und input sowie die umgebenden div bei schmalen Fenstern übereinander. Flexbox wird noch nicht verwendet.

Ab 400px sind label und input dann nebeneinander, die div aber weiterhin untereinander.

Ab 600px habe ich die Maske dann deiner Vorgabe angepasst.

Zitat:
3. Was genau bedeutet folgende Deklaration, also warum wird der Wert so kalkuliert?
Einige Browser verwenden bei Flexbox zwangsweise das content-box-Modell. Um Probleme zu vermeiden verwende ich es bei Flexbox deshalb generell, dann brauche ich für die Problembrowser keine Fallbacks.

Beim content-box-Modell besteht die Gesamtbreite von Elementen aus ihrer Breite (width) + padding + border + margin. Um die Übersicht zu erhöhen und spätere Änderungen zu erleichtern trage ich alle 4 Größen deshalb grundsätzlich in der Reihenfolge mit den hauptsächlich von mir verwendeten Einheiten (% rem px rem) ein.

In dem Beispiel soll das Element genau 50% breit sein.

Als padding ist 1rem (2 mal 0.5rem) hinterlegt. border und margin haben (noch) keine Werte. So stehen zwei Elemente nebeneinander.

Falls die Elemente sich nicht so wie von mir erwartet verhalten kann ich so direkt nachvollziehen und kontrollieren, ob die Angaben für padding, border und margin passen.

Bei 5 Werten

Code:
flex-basis: calc(100% - 3.5rem - 0rem - 0px - 0rem);
ist der zweite Wert die Breite eines anderen Elements (hier label) in der gleichen Zeile (in diesem Beispiel 3rem Breite + 0.5rem margin-rechts).

Hinweis: Die Werte meines Testbeispiels weichen inzwischen etwas von den geposteten ab. Das Prinzip ist aber gleich geblieben. So sind die Break-Points bei 500px und 800px.

Gruss

MrMurphy

Geändert von MrMurphy (05.01.2017 um 20:50 Uhr)
Mit Zitat antworten