Was ist display:flex in CSS?

Wenn wir mit der Gestaltung von Websites beginnen, kann die richtige Ausrichtung der Elemente eine der frustrierendsten Aufgaben sein.

Als Entwickler und Lehrer weiß ich, dass uns Fragen gestellt werden wie:

• Wie stelle ich sicher, dass Elemente sowohl vertikal als auch horizontal ausgerichtet sind und auf verschiedenen Geräten und Auflösungen gut aussehen?
• Wie kann ich Schaltflächen gleichmäßig in einem Raum verteilen?

Niemand wird mit diesem Wissen geboren, aber nach mehreren Versuchen und Fehlern vereinfachte das Erlernen der Verwendung display: flex in CSS meinen Designprozess erheblich.

Wenn Sie nach einer praktischen und effizienten Lösung suchen, um das Layout Ihrer Elemente zu verbessern und Ihre Designs zu optimieren, ist dieser Artikel genau das Richtige für Sie.

Was finden Sie in diesem Artikel?

In diesem Artikel untersuchen wir die CSS-Eigenschaft „ display: flex im Detail und behandeln dabei die folgenden Punkte:

• Was ist display: flex in CSS?
• Wofür wird display: flex verwendet?
• Grundlegende display: flex
• Eigenschaften, die Sie mit display: flex kombinieren können
• Praktische Anwendungsbeispiele:
  • Ein Element zentrieren
  • Elemente in einem Menü verteilen
• Tipps für die Arbeit mit display: flex

---

Was ist display: flex in CSS?

Die Eigenschaft display: flex aktiviert das Flexbox-Modell in einem Container und ermöglicht so ein effizientes und anpassbares Layout der darin enthaltenen untergeordneten Elemente.

Wenn Sie display: flex auf einen Container anwenden, wird dieser zu einem Flex-Container und seine direkten Elemente werden zu Flex-Elementen .

---

Wofür wird display: flex verwendet?

display: flex wird verwendet, um flexiblere und reaktionsschnellere Webdesigns zu erstellen. Erleichtert die Ausrichtung und Verteilung von Elementen innerhalb eines Containers und passt sich automatisch an unterschiedliche Bildschirmgrößen und -ausrichtungen an. Dies ist besonders nützlich für die Gestaltung von Schnittstellen, die eine dynamische und anpassbare Anordnung von Elementen erfordern.

---

Grundlegende display: flex

Um ein Element in einen Flex-Container zu konvertieren, wird die folgende Syntax verwendet:

.contenedor { display: flex; }

Wenn diese Eigenschaft angewendet wird, verhalten sich die direkten untergeordneten Elemente des Containers wie Flex-Elemente und werden entsprechend den Regeln des Flexbox-Modells ausgerichtet.

---

Eigenschaften, die Sie mit display: flex kombinieren können

Sobald ein Container als Flex definiert ist, können Sie verschiedene Eigenschaften verwenden, um das Layout von Flex-Elementen zu steuern:

• flex-direction : Definiert die Richtung, in der Elemente im Container platziert werden. Allgemeine Werte: row (horizontale Zeile), column (vertikale Spalte).
• justify-content : Richtet Elemente entlang der Hauptachse aus. Allgemeine Werte: flex-start , flex-end , center , space-between , space-around .
• align-items : Richtet Elemente entlang der Querachse aus. Allgemeine Werte: flex-start , flex-end , center , stretch .
• flex-wrap : Steuert, ob Elemente über mehrere Zeilen umbrochen werden sollen oder nicht. Werte: nowrap (Standard), wrap , wrap-reverse .
• align-content : Richtet die Containerzeilen aus, wenn auf der Querachse zusätzlicher Platz vorhanden ist. Werte: flex-start , flex-end , center , space-between , space-around , stretch .

Mit diesen Eigenschaften können Sie die Anordnung der Elemente innerhalb des Flex-Containers individuell anpassen und präzise steuern.

Weitere Informationen finden Sie unter developer.mozilla.org

Und bevor es mit weiteren Tipps weitergeht, wie wäre es mit einer kleinen Pause? Tun Sie es mit einer unserer personalisierten Tassen für Programmierer!

Denn schließlich trägt stilvolles Design auch zur Steigerung der Produktivität bei. ☕👕

---

display: flex

Nachfolgend finden Sie einige praktische Beispiele für die Verwendung display: flex in verschiedenen Situationen:

Ein Element zentrieren

So zentrieren Sie ein Element horizontal oder vertikal innerhalb eines Containers:

 
<div class="contenedor">
 <div class="elemento">Contenido centrado</div>
 </div>
 
.contenedor {
 display: flex;
 justify-content: center; /* Centra horizontalmente */
 align-items: center; /* Centra verticalmente */
 height: 100vh; /* Altura del contenedor */
 }

In diesem Beispiel zentriert der Flex-Container das untergeordnete Element in beide Richtungen.

Elemente in einem Menü verteilen

So erstellen Sie ein Menü mit gleichmäßig verteilten Elementen:1

 
<nav class="menu">
 <a href="#">Inicio</a> 
<a href="#">Dienstleistungen</a>
 <a href="#">Kontakt</a>
 </nav>

 
.menu {
 display: flex;
 justify-content: space-around; /* Distribuye espacio equitativamente */
 background-color: #333;
 }

 .menu a {
 color: white;
 text-decoration: none;
 padding: 15px;
 }

In diesem Fall werden die Menülinks gleichmäßig im Container verteilt.

---

Tipps für die Arbeit mit display: flex

• Achsen verstehen : Die main axis und cross axis sind entscheidend zum Verständnis der Ausrichtung flexibler Elemente.
• Verwenden Sie Kurzeigenschaften : Eigenschaften wie flex können das Schreiben und Verstehen von Code erleichtern.
• Testen und anpassen : Experimentieren Sie mit verschiedenen Eigenschaftenkombinationen, um das gewünschte Design zu erreichen.
• Kompatibilität : Obwohl flexbox in modernen Browsern weitgehend unterstützt wird, ist es immer eine gute Praxis, die Kompatibilität zu überprüfen und bei Bedarf Workarounds bereitzustellen.

Eine ausführlichere Referenz und zusätzliche Beispiele finden Sie in der offiziellen MDN-Dokumentation zu Flexbox-Grundlagen .

---