Heydons Holy Albatross ist eine Technik, um eine Reihe von Elementen bei einer bestimmten Breite in eine Spalte von Elementen umbrechen zu lassen. Eine angegebene Elternteil-Breite, nicht eine Bildschirmbreite wie bei einer Media Query. Also so etwas wie eine Container-Abfrage (wisst ihr, diese Dinge, die noch nicht existieren und die wir uns alle wünschen).
Ich habe es schon einmal benutzt, obwohl mich darauf hingewiesen wurde, dass die alleinige Verwendung bei zwei Elementen nicht wirklich notwendig ist und der Holy Albatross am nützlichsten ist, wenn man mit drei oder mehr Elementen arbeitet.
Der ursprüngliche Artikel ging nicht wirklich auf die Einstellung der Breiten für die horizontale Reihe von Elementen ein (sagen wir, eines davon muss größer sein als die anderen), aber der Nachfolgeartikel hat eine Demo darin, die zeigt, dass flex-grow verwendet werden kann, um genau das zu tun. Aber Xiao Zhuo Jia bemerkt, dass es nicht gerade ein gutes System ist
Das Problem ist, dass es sehr schwierig ist, die Breite für Ihre nicht gestapelte Spalte festzulegen, da die Breite von dem Hack übernommen wird.
Ein Vorschlag von Heydon ist die Verwendung von flex-grow, die Probleme sind
1. Es ist eine sehr unintuitive Art, Breite einzustellen – für ein 3-Spalten-Layout möchten Sie, dass eine Spalte 50 % breit ist, Sie müssen flex-grow auf 2,333 setzen
2. Sie müssen die Gesamtzahl der Spalten kennen und den flex-grow-Wert der anderen Spalten entsprechend einstellenDie andere Methode ist die Verwendung von min-width und max-width, wie in diesem Codepen gezeigt. Ich glaube nicht, dass
max-width: 100%benötigt wird, da alles Größere als 100 % aufgrund von flex-shrink auf 100 % geändert wird, sodass wir es hier wirklich mit min-width zu tun haben.Das Problem bei dieser Methode ist, dass wir min-width für alle Spalten festlegen müssen, sonst übernimmt flex-grow und erweitert die Spalte über die von uns festgelegte min-width hinaus.
Nichts davon macht Spaß.
Ich habe mich ein wenig umgeschaut und festgestellt, dass man beides haben kann…
Xiao Zhuo Jia nennt es den Unholy Albatross. Schauen Sie sich den Teil How does it work? des Artikels an, um die großartige CSS-Trickserie zu sehen. Es hat mit der Verwendung der max()-Funktion und CSS-Custom-Properties mit Fallbacks zu tun. Es bleibt sehr im Geiste des Holy Albatross und ermöglicht es Ihnen, die Breite (über --width) für jedes gegebene Element mit einem Pixelwert oder Verhältnis festzulegen. Außerdem unterstützt es Abstände.