Hier zeige ich Ihnen nämlich, wie Sie mithilfe von Flexbox-Layouts hochwertige Header für Websites erstellen. Ich werde einige Tipps teilen und am Ende mein Projekt demonstrieren, das speziell für dieses Material erstellt wurde. Wenn Sie sich wirklich für das Thema interessieren, das ich hier ansprechen möchte, sollten Sie diesen Artikel unbedingt bis zum Ende lesen.
Hier gehe ich davon aus, dass Sie die Grundlagen des Flexbox-Layouts kennen. Hier ist für alle Fälle mein Artikel für diejenigen geschrieben, die mehr über die CSS-Eigenschaft erfahren möchten
flex.
Einführung
Stellen wir zunächst sicher, dass Sie und ich den "Site-Header" oder "Site-Header" dasselbe nennen. Der Site-Header ist eines der ersten Seitenelemente, die ein Benutzer beim Besuch einer Site sieht. Es enthält normalerweise das Logo oder den Namen der Site sowie Navigationslinks. Schauen Sie sich die folgende Abbildung an.
Site-Logo, Navigationslinks und Header-Teil-Container
Unabhängig vom Design des Site-Header-Teils sind das Logo und die Liste der Links die wichtigsten Elemente.
Flexbox-Technologie in Aktion
Wenn das Layout für den Header einer Site mithilfe der Flexbox-Technologie erstellt wird, werden alle Elemente auf derselben Ebene in einer einzigen Zeile angeordnet. Dann müssen Sie nur noch die Eigenschaft verwenden
justify-content, um die Elemente auszurichten, indem Sie den freien Speicherplatz zwischen ihnen verteilen.
Hier ist der Markup-Code:
<header class="site-header">
<a href="#" class="brand">Brand</a>
<nav class="nav"></nav>
</header>
Hier sind die Stile:
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
}
Es ist überhaupt nicht schwierig, oder? Nun, für eine so einfache Überschrift ist es das. In der Praxis können die Dinge jedoch viel komplizierter sein.
Seitenkopfcontainer
Das im vorherigen Abschnitt beschriebene Seitenkopf-Markup enthält kein inneres Containerelement, das Elemente enthält, die das Logo und die Navigationslinks darstellen. Auf großen Bildschirmen kann die Verwendung dieses Layouts problematisch sein.
Seitenkopflayout ohne Verwendung eines inneren Containers (oben) und eines Containers (unten) erstellt Beachten Sie, dass der erste Seitenkopf zu breit ist, da der innere Container beim Erstellen nicht verwendet wurde. Aber das zweite Layout sieht viel besser aus. Daher sollte der HTML-Code des vorherigen Beispiels wie folgt umgeschrieben werden:
<header class="site-header">
<div class="wrapper site-header__wrapper">
<a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
<nav class="nav"></nav>
</div>
</header>
Und die Flex-Stile müssen auf das Element angewendet werden
.site-header__wrapper:
.site-header__wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
Verwenden der Flex-Wrap-Eigenschaft
Eine Eigenschaft
flex-wrapist eine Art CSS-Sicherheitsmechanismus. Wenn die Bildschirmgröße klein ist, besteht die Möglichkeit, dass Sie horizontales Scrollen verwenden müssen, um mit dem Kopfteil der Seite zu arbeiten. So sieht es aus.
Um mit dem Seitentitel zu arbeiten, müssen Sie horizontales Scrollen verwenden. Die Sache ist, dass die Flex-Wrap-Eigenschaft hier nicht verwendet wird: Wrap
Wie Sie sehen, ist es unpraktisch, mit einer solchen Seite zu arbeiten. Vergessen Sie also nicht die Immobilie
flex-wrap!
Erkundung verschiedener Layoutoptionen für Seitenkopfabschnitte
Was mir an Flexbox-Layouts gefällt, ist, dass sie die Unterstützung verschiedener Entwurfsoptionen für Kopfzeilenabschnitte von Seiten erleichtern. In diesem Abschnitt werde ich anhand des obigen Beispiels die Möglichkeiten zum Erweitern des Layouts untersuchen, indem ich neue Elemente wie Schaltflächen und Suchfelder hinzufüge. Ich möchte sofort nach Möglichkeiten suchen, die Anzeigereihenfolge der untergeordneten Elemente der Kopfzeile der Seite zu ändern.
▍Variante Nummer 1
Erste Version des Kopfteils der Seite
Zu diesem Layout wurde eine Schaltfläche hinzugefügt, die nach dem Block der Navigationslinks platziert wird. Wie kann man es machen? Muss ich es als Link innerhalb des Elements entwerfen
<nav>? Oder sollte es vielleicht ein separates Element sein? Ich werde genau das tun.
Hier ist der HTML-Code für meine Idee:
<header class="site-header">
<div class="wrapper site-header__wrapper">
<a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
<nav class="nav"></nav>
<a href="/track-shipment" class="button">Track</a>
</div>
</header>
In diesem Fall kann der Abstand zwischen Elementen nicht mithilfe der Eigenschaft festgelegt werden
justify-content: space-between. Stattdessen werde ich die Eigenschaft verwenden, um den Linkblock auszurichten margin-left: auto. Dadurch werden Links und Schaltflächen auf die rechte Seite des Containers gedrückt.
Elemente werden dank Rand-Links: Auto auf die rechte Seite des Containers gedrückt. Das
Trennen der Schaltfläche vom Verknüpfungsblock ist hilfreich für mobile Layouts, bei denen Sie beispielsweise die Schaltfläche verlassen und den Verknüpfungsblock als Dropdown-Menü anzeigen müssen.
Seitenkopf auf Desktop und Handy
▍ Option Nummer 2
Die zweite Variante des Überschriften-Teils der Seite
Hier haben wir die Funktionen des Überschriften-Teils der Seite erweitert, indem wir ihm ein Suchfeld hinzugefügt haben. Es nimmt den freien Platz ein, der nach dem Platzieren anderer Elemente auf der Seite übrig bleibt. Bei Flexbox-Layouts kann dies durch Anwenden der Eigenschaft erreicht werden
flex.
Hier ist das Markup:
<header class="site-header">
<div class="wrapper site-header__wrapper">
<a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
<div class="search"></div>
<nav class="nav"></nav>
<a href="/track-shipment" class="button">Track</a>
</div>
</header>
Hier ist der Stil, der auf das Suchfeld angewendet wird:
.search {
flex: 1;
}
Das ist alles! Jetzt füllt das Feld den leeren Raum zwischen dem Logo und dem Linkblock aus. Dieser Ansatz weist jedoch einige Einschränkungen auf. Auf kleinen Bildschirmen sieht die Kopfzeile der Seite wie folgt aus.
Seitenkopf auf einem kleinen Bildschirm
Die Breite des Suchfelds darf eine bestimmte Größe nicht unterschreiten. Andernfalls ist es schwierig, Text einzugeben. Im Folgenden finden Sie verschiedene Lösungen für dieses Problem.
Lösen des Problems durch Verringern der Breite des Suchfelds auf kleinen Bildschirmen
Die zweite Option gefällt mir besser, da der Linkblock bei Verwendung nicht zu früh ausgeblendet wird. Im Allgemeinen kann ich feststellen, dass ich mich bemühe, das Element nicht auszublenden, falls es die korrekte Anzeige des Layouts nicht beeinträchtigt.
▍ Option Nummer 3
Die dritte Version des Überschriftsteils
Dies ist das gleiche Markup wie die erste Version der Überschrift. Hier wurde jedoch die Reihenfolge der Anzeige von Elementen auf dem Bildschirm geändert. Wie kann man es machen? Sie können sich entscheiden, die Immobilie hier zu nutzen
order. Lassen Sie uns diese Idee untersuchen.
Hier ist der HTML:
<header class="site-header">
<div class="wrapper site-header__wrapper">
<a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
<nav class="nav"></nav>
<a href="/track-shipment" class="button">Track</a>
</div>
</header>
Hier sind die Stile:
.site-header {
display: flex;
justify-content: space-between;
}
.nav {
order: -1;
}
Und so sieht das Ergebnis des Renderns aus.
Verwenden der Eigenschaft "Rechtfertigungsinhalt: Abstand zwischen" richtet das Logo nicht an der Mitte aus. Diese Eigenschaft verteilt nur den freien Speicherplatz zwischen den Elementen.
Die Lösung für dieses Problem besteht darin, jedes untergeordnete Element dem Header der Seite mit einer Eigenschaft zuzuweisen
flex: 1. Dadurch wird der Abstand zwischen den Elementen verteilt.
Hier sind die Stile:
.brand,
.nav,
.button {
flex: 1;
}
Gleichmäßige Verteilung des freien Speicherplatzes zwischen den Elementen des Überschriftsteils der Seite
Mit der Schaltfläche ist jedoch etwas Seltsames passiert. Es ist aufgrund der Anwendung des Eigentums
flex: 1zu lang geworden. Die einzige Möglichkeit, dies zu beheben, besteht darin, die Schaltfläche in ein Containerelement einzufügen:
<header class="site-header">
<div class="wrapper site-header__wrapper">
<a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
<nav class="nav"></nav>
<div class="button-wrapper">
<a href="/track-shipment" class="button">Track</a>
</div>
</div>
</header>
Mit diesem Ansatz können Sie sowohl das Logo als auch die Schaltfläche zentrieren:
.logo {
text-align: center;
}
/* . - , , . */
.button-wrapper {
text-align: end; /* end - , LTR-, , right */
}
Ausrichten von Elementen
Dieser Ansatz ist jedoch auch nicht ideal. Denken Sie daran, dass es zu Problemen kommt, wenn der Navigationsblock mehr Links enthält. Hierbei ist es nämlich erforderlich, dass die Breite des Navigationsblocks eine bestimmte Größe nicht überschreitet. Hier ist ein Beispiel, bei dem das Logo seine Mittenausrichtung verliert.
Das Logo ist nicht mehr zentriert.
Wie Sie im vorherigen Bild sehen können, ist das Logo nicht mehr zentriert. Es lohnt sich, sich an dieses Merkmal des obigen Ansatzes zu erinnern, um nicht auf unerwartete Probleme zu stoßen.
Nachdem wir uns nun mit den verschiedenen Gestaltungsoptionen für Website-Header-Layouts befasst und darüber gesprochen haben, wie solche Layouts erstellt werden, werfen wir einen Blick auf einige wichtige Ideen, die uns beim Erstellen von Seiten-Header-Layouts helfen können.
Tipps zum Entwerfen von Headern für Flexbox-basierte Seiten
▍Die Flex-Basis-Eigenschaft
Ich bevorzuge die Verwendung einer Eigenschaft,
flex-basis: 100%wenn das Element auf Mobilgeräten die volle Breite haben muss. Zum Beispiel, wenn es sich um einen wichtigen Block von Navigationslinks handelt, der nicht ausgeblendet werden kann.
Das Ergebnis der Anwendung der Flex-Basis-Eigenschaft ist 100%. Die
Anwendung dieser Eigenschaft, wenn Sie sich die vorherige Abbildung ansehen, scheint eine einfache Angelegenheit zu sein. In Wirklichkeit ist dies nicht der Fall. In der Regel kann der Header einer Site eine Auffüllung aufweisen. Wenn Sie das Element so anpassen, dass es die gesamte Breite ausfüllt, geschieht dies erst, wenn sich die Auffüllung überlappt. Das Entfernen ist jedoch unpraktisch, da dies Auswirkungen auf andere Elemente des Layouts hat.
So beheben Sie dieses Problem:
- Fügen wir
flex: 1 0 100%dem Navigationsblock hinzu. - Lassen Sie uns gegebenenfalls seine Eigenschaft ändern
order. Manchmal müssen wir uns auch um andere Elemente kümmern, also müssen wir sicherstellen, dass das Navigationsfeld das letzte Element ist. - Passen wir die Ränder des Navigationsblocks mit einem negativen Wert an, der der Größe der internen Ränder entspricht. Dadurch kann dieser Block die gesamte Breite der Seite ausfüllen.
- Stellen wir die Polsterung so ein, dass sich etwas "Luft" im Element befindet.
- Schließlich werden wir die Eigenschaft verwenden,
justify-content: centerum die Navigationselemente zu zentrieren (obwohl dies nicht besonders wichtig ist).
Hier sind die Stile (in eckigen Klammern stehen die Elemente in der obigen Liste, auf die sie sich beziehen):
.nav {
flex: 1 0 100%; /* [1] */
order: 2; /* [2] */
margin: 1rem -1rem -1rem -1rem; /* [3] */
padding: 1rem; /* [4] */
display: flex; /* [5] */
justify-content: center; /* [5] */
}
Und so sieht die schrittweise Anwendung der oben genannten Stile auf die Liste der Navigationselemente aus.
Styling-Elemente Schritt für Schritt
▍Anpassen des Abstands zwischen Elementen
Da die Browser Chrome und Firefox die Eigenschaft unterstützen
gap, ist es sehr einfach, den Abstand zwischen flexiblen Elementen anzupassen. Schauen Sie sich den nächsten Header-Abschnitt der Seite an.
Verwenden der Gap-Eigenschaft
Um den Abstand zwischen den in der Abbildung ausgewählten Elementen anzupassen, müssen Sie dem übergeordneten Flex-Element eine Eigenschaft hinzufügen
gap: 1rem. Ohne diese Eigenschaft müssten wir die Elemente auf die gleiche Weise formatieren.
/* */
.brand {
margin-right: 1rem;
}
.sign-in {
margin-right: 1rem;
}
/* */
.site-header {
/* flexbox-*/
gap: 1rem;
}
Wenn Sie eine Eigenschaft verwenden
gap, denken Sie daran, dass Sie einen Fallback vorbereiten müssen, falls dieser von dem Browser, in dem die Seite angezeigt wird, nicht unterstützt wird. Ich habe einen ausführlichen Artikel darüber geschrieben .
Damit ist das Gespräch abgeschlossen, aber bevor wir uns trennen, möchte ich Ihnen eines meiner Projekte zeigen.
Headers-CSS-Projekt
Hier ist ein Beispiel für Seitenkopfzeilen, die im Projekt headers-css erstellt werden.
Kopfzeilen von Seiten aus Kopfzeilen-CSS
Ich habe mich für ein Projekt entschieden, in dem Vorlagen für Kopfzeilen von Websites gesammelt werden, die als separate Seiten gestaltet sind. Wenn ich jetzt ein ähnliches Element benötige, kann ich es schnell finden und in ein neues Projekt integrieren. Ich habe nämlich 17 Variationen des Seitenkopfes erstellt. Ich plane, dieses Projekt in naher Zukunft zu erweitern. Bei der Arbeit an diesen Elementen habe ich besonders auf Folgendes geachtet:
- Flexibilität.
- Voll ansprechendes Design.
- Verwenden von Sass, wodurch das Bearbeiten meiner Vorlagen vereinfacht wird (obwohl ich in diesem Bereich den Code noch ein wenig umgestalten muss).
- Barrierefreiheit (wenn Sie auf etwas Falsches stoßen - fügen Sie dem Projekt-Task-Tracker einen Eintrag hinzu).
Auf dieser Seite sehen Sie das Header-CSS-Projekt in Aktion. Und hier ist das GitHub-Repository des Projekts.
Wie erstellen Sie die Header-Teile Ihrer Webseiten?
