INT

Internet-Technik

CSS

Flexbox

Flexbox ist eine sehr moderne und einfache Möglichkeit, responsive und flexible Layouts zu erstellen.

Dabei kann nicht nur die Größen­darstellung, sondern auch die Reihenfolge der Elemente unabhängig vom HTML-Code durch CSS festgelegt werden.

Verschiedene Anwendungen von Flexbox für Layout

Das Ungewöhnlichste an Flexbox ist der Verzicht auf Breiten bzw. Mindestbreiten.

Das Flexbox-Modell unterscheidet zwischen dem Elternelement Flex-Container und den darin enthaltenen Flex-Items.

HTML

				
					<ul class="container">
						<li>A</li>
						<li>B</li>
						<li>C</li>
						<li>D</li>
						<li>E</li>
					</ul>

CSS

				
					.container {
						display: flex;
					}

Browser

  • A
  • B
  • C
  • D
  • E

HTML

				
					<ul class="container">
						<li>A</li>
						<li>B</li>
						<li>C</li>
						<li>D</li>
						<li>E</li>
					</ul>

CSS

				
					.container {
						display: flex;
						flex-direction: row;
					}

Browser

  • A
  • B
  • C
  • D
  • E

HTML

				
					<ul class="container">
						<li>A</li>
						<li>B</li>
						<li>C</li>
						<li>D</li>
						<li>E</li>
					</ul>

CSS

				
					.container {
						display: flex;
						flex-direction: column;
					}

Browser

  • A
  • B
  • C
  • D
  • E

Standardmäßig werden die Flex-Items in einer Zeile dargestellt und wenn nötig schmaler gemacht.

  • Item A
  • Item B
  • Item C
  • Item D
  • Item E
  • Item A
  • Item B
  • Item C
  • Item D
  • Item E
  • Item A
  • Item B
  • Item C
  • Item D
  • Item E

Mit flex-wrap: wrap; lässt sich das Umbruch-Verhalten der Flex-Items festlegen.

HTML

				
					<ul class="container">
						<li>Item A</li>
						<li>Item B</li>
						<li>Item C</li>
						<li>Item D</li>
						<li>Item E</li>
					</ul>

CSS

				
					.container {
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
					}

Browser

  • Item A
  • Item B
  • Item C
  • Item D
  • Item E

Mit justify-content kann man den übrigen Platz zwischen den Flex-Items verteilen, zB. space-between oder space-around.

HTML

				
					<ul class="container">
						<li>Item A</li>
						<li>Item B</li>
						<li>Item C</li>
						<li>Item D</li>
						<li>Item E</li>
					</ul>

CSS

				
					.container {
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						justify-content: space-between;
					}

Browser

  • Item A
  • Item B
  • Item C
  • Item D
  • Item E

HTML

				
					<ul class="container">
						<li>Item A</li>
						<li>Item B</li>
						<li>Item C</li>
						<li>Item D</li>
						<li>Item E</li>
					</ul>

CSS

				
					.container {
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						justify-content: space-around;
					}

Browser

  • Item A
  • Item B
  • Item C
  • Item D
  • Item E

Benötigt man genauere Kontrolle über die Flex-Items, kann man diese auch mit individuellen Eigenschaften versehen.

Mit flex-grow kann man festlegen, ob und wie stark ein Element in der Breite wachsen darf.

Mögliche Werte sind ganze Zahlen wie 0, 1, 2, etc.

Tip: Gibt man allen Flex-Items den selben flex-grow Wert, zB. 1, werden alle gleich breit dargestellt.

Im Gegenzug kann man mit flex-shrink angeben, ob ein Element auch schrumpfen darf.

		
			flex-shrink: 1; /* Element darf schrumpfen */

			flex-shrink: 0; /* Element darf NICHT schrumpfen */

flex-basis legt alternativ zu width die Ausgangsgröße von Flex-Items fest.

		
			flex-basis: auto; /* automatische Breite */
			
			width: 350px; /* manuell festgelegte Breite */
			flex-basis: 350px;

Es gibt noch viele andere Eigenschaften, mit denen sich das Erscheinungsbild von flexbox beeinflussen lässt, siehe Referenzen.

Experimentiere mit flexbox im Flexbox Playground.

Versuche dich an Flexbox Froggy.

Referenz

Github Repo

Beginne mit Aufgabe 7.

https://arnorichter.de/
hsma/int/aufgaben