flexboxErste Schritte mit Flexbox


Bemerkungen

In diesem Abschnitt erhalten Sie einen Überblick darüber, was Flexbox ist und warum ein Entwickler sie verwenden möchte.

Es sollte auch alle großen Themen in Flexbox erwähnen und auf die verwandten Themen verweisen. Da die Dokumentation für flexbox neu ist, müssen Sie möglicherweise erste Versionen dieser verwandten Themen erstellen.

Versionen

Ausführung Veröffentlichungsdatum
Kandidatenempfehlung März 2016 2016-03-01
Kandidatenempfehlung September 2012 2012-09-18
Arbeitsentwurf März 2011 2011-03-22
Arbeitsentwurf Juli 2009 2009-07-23

Flexbox Container und Artikel

Flexbox oder flexible Box ist eine Layoutmethode, um den Inhalt auf einer Seite auf vorhersagbare Weise anzuordnen. Flexbox bietet eine Verbesserung gegenüber der traditionellen Positionierung von Blockmodellen mit Floats oder sogar tabellenähnlicher Positionierung für Inhalte auf der Seite.

Im Kern kann die Flexbox in ein übergeordnetes Element (Flex-Container) und ein untergeordnetes Element (Flex-Element) unterteilt werden.

Flex Container

Ein Flex-Container kann erstellt werden, indem seine Anzeigeeigenschaft auf Flex gesetzt wird:

.container {
  display: flex;
}
 

Flex Artikel

Jedes untergeordnete Element eines Flex-Containers wird zu einem Flex-Element. Diese Flex-Elemente können dann zusätzliche Eigenschaften erhalten, um ihre Position auf der Seite zu ändern.

.item {
  flex: 1;
}
 

Diese flex: 1 Eigenschaft ist eine Abkürzung für flex-grow: 1 damit sie relativ zu ihren Geschwistern im Container wachsen kann.

Zusammengefasst ist dies das HTML-Markup:

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
 

Flexbox Einführung

Das in CSS3 eingeführte Layout der Flexbox (Flexible Box) bietet eine effizientere Möglichkeit, den Raum zwischen untergeordneten Elementen ( flex items ) innerhalb eines Containerelements ( flex container ) anzuordnen, auszurichten und zu verteilen. Am wichtigsten sogar, wenn ihre Größe unbekannt oder dynamisch ist und daher der Begriff "Flex" oder "Flexibel".

Beginnen wir mit den Grundlagen und sehen Sie, wie ein Container als Flex initialisiert werden kann.

Betrachten Sie das folgende Markup:

<div class="flex-container">
  <div class="flex-item-1"></div>
  <div class="flex-item-2"></div>
  <div class="flex-item-3"></div>
</div>
 

Eine Flexbox wird durch einfaches Verwenden von display: flex initialisiert. Erledigt!

.flex-container {
  height: 100px;
  padding: 10px;
  background: grey;

  display: flex; // or display: inline-flex;
}
 

Nun, da der Flex-Container fertig ist, lassen Sie uns mit seinen Flex-Elementen herumspielen, die jeweils eine Breite von jeweils etwa 25% haben, und die Flex-Elemente horizontal zentrieren, wobei die Flex-Elemente innerhalb des übergeordneten Containers ausgerichtet werden.

.flex-item-1 {
  width: 25%;
  background: green;
}

.flex-item-2 {
  width: 25%;
  background: purple;
}

.flex-item-3 {
  width: 25%;
  background: pink;
}
 

Bitte beachten Sie, dass ich den drei Kindern absichtlich eine Breite von jeweils 25% gegeben habe, um zu zeigen, wie einfach es ist, sich in einer Flexbox um die Kinder zu bewegen.

Wenn wir nun den obigen Code ausführen, sollten wir die 3 Kinder innerhalb des Containers horizontal nebeneinander sehen. Dies liegt daran, dass eine Flexbox standardmäßig die Eigenschaft flex-direction: row . Dies bedeutet, dass die Flex-Elemente standardmäßig horizontal nebeneinander ausgerichtet werden. Es sollte auch eine Lücke auf der rechten Seite sein, da die Gesamtbreite der Kinder nicht 100% betrug.

Versuchen Sie nun, die Eigenschaft justify-content: center zum flex-container hinzuzufügen.

.flex-container {
  ...
  justify-content: center;
}
 

Das Ergebnis wäre, dass die Kinder horizontal zentriert sind. Dieselbe Eigenschaft hat andere Werte wie flex-end (nach rechts ausrichten), space-around (gleiches Leerzeichen um die Elemente), space-between (gleiches Leerzeichen zwischen den Elementen).

Wichtig: Andere Blockelementeigenschaften wie text-align: center usw. haben keine Auswirkungen auf ein Flex-Element.

Installation oder Setup

Flexbox ist ein vom World Wide Web Consortium standardisiertes CSS3-Modul. Dies ist ein Layoutmodus für die Elementanordnung, sodass sich die Elemente vorhersehbar verhalten, wenn das Seitenlayout unterschiedliche Anzeigegrößen berücksichtigen muss.

Da es ein Teil von CSS3 ist, müssen Sie nichts installieren. Es kann verwendet werden, solange der Browser dies unterstützt und die meisten modernen Browser dies tun. Um zu prüfen, ob Ihr Browser dies unterstützt, finden Sie hier die Kompatibilitätstabelle .

Um flexbox in Ihrem CSS einzurichten und zu verwenden, flexbox Sie einfach display: flex einem Selektor hinzu.