Vier Layouts zum Preis von einem

Ziemlich bemerkenswert, wenn ein Tweet über ein Flexbox -Layouts auf Twitter 8K -Likes erhält!

4 Layouts zum Preis von 1, danke Flex?

CSS`
bilden {
Anzeige: Flex;
Flex-Wrap: Wrap;

&> Eingabe {
Flex: 1 1 10ch;
Rand: .5rem;

& [type = "mail"] {
Flex: 3 1 30ch;
}
}
}
`

Quelle auf Codepen? https: //t.co/q8h5ly2zie pic.twitter.com/y6hqxclilz

- Adam Argyle (@Argyleiink) 14. Januar 2020

Das ist auch „native“ CSS -Nesting, die dort verwendet werden, vorausgesetzt, wir bekommen das irgendwann und die Syntax.

Es gab einige Feedback, dass der Code unergründlich ist. Ich glaube nicht wirklich, für mich heißt es:

• Alle diese Eingaben dürfen sowohl schrumpfen als auch wachsen
• Es gibt sogar Abstand um alles
• Die E -Mail -Eingabe sollte dreimal größer sein als die anderen
• Wenn es umwickeln muss, fein, wickeln Sie.

Ein großartiger Anwendungsfall für Flexbox, der der richtige Layout -Mechanismus ist, wenn Sie nicht versuchen, über die Größe von allem sehr genau zu sein.

Es gibt einen Blog -Beitrag (keine Byline? ‍Eitung) mit einer längeren Erklärung.

Dies erinnert mich an eine Menge an Tim Van Dammes adaptives Foto -Layout, in dem sich Fotos mit Flexbox auslegen. Sie halten ihre Seitenverhältnisse nicht vollständig, aber sie tun es meistens, dank der Flexibilität von Flexbox buchstäblich.

Hier ist eine lustige Gabel des Originals.

Es ist wie ein Zillion -Layouts für den Preis von einem und nur ein paar Codezeilen zum Booten.

Das obige ist der detaillierte Inhalt vonVier Layouts zum Preis von einem. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!