Lektion 7: Flexbox

Videolektionen

Teil 1: Die Zitatboxen sollen ab einer bestimmten Bildschirmbreite horizontal angeordnet werden. Dafür wenden wir die Einstellung display:flex an.

Teil 2: Wir verwenden das Flexbox-System nochmal, um zwei Überschriften im Header nebeneinander anzuordnen.

Textlektion

Das Flexbox-System ist geeignet, um Inhalte innerhalb einer Section horizontal, d.h. nebeneinander anzuordnen.
 
Beispiel
Gegeben ist folgende kleine Webseite:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Flexbox Beispiel</title>	
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<style>		
			p{
				background-color: lightblue;
				padding:20px;	
			}		
		</style>
	</head>
	<body>
			<h3>Tierarten</h3>
			
			<p>Fische</p>
			
			<p>Vögel</p>
			
			<p>Katzen</p>				
	</body>
</html>

Sie sieht im Browser so aus (anklicken zum Vergrößern):

flex_bild

Für das mobile Layout (Smartphones) ist das in Ordnung. Ab einer Bildschirmbreite von 600px sollen die blauen Boxen jedoch horizontal nebeneinander angeordnet werden. Folgende Schritte sind notwendig, um dieses Ziel mit dem Flexbox-System von CSS zu erreichen:

  1. Die Boxen müssen von einem Elternelement umgeben werden, z.B. von einem div mit einer bestimmten Klasse.
  2. Im CSS-Bereich muss eine Media Query angelegt werden. Dabei muss min-width auf die gewünschte Bildschirmbreite gesetzt werden, ab der die horizontale Anordnung gelten soll.
  3. Für das umgebende Elternelement muss in der Media Query die Einstellung display:flex festgelegt werden.

HTML-Code zu Schritt 1:

<div class="box_container">
	<p>Fische</p>
		
	<p>Vögel</p>
			
	<p>Katzen</p>	
</div>

CSS-Code zu Schritt 1 und 2:

@media screen and (min-width: 600px){
			
	.box_container{
	   display: flex;
	}
	
        /* Optional, damit zwischen den Boxen ein horizontaler Abstand eingefügt wird.*/			
	p{			
	  margin-right: 20px;
	}
}

Ergebnis:
flex_bild2

Anmerkungen:

  • Das Flexbox-System funktioniert mit beliebigen HTML-Elementen, Klassen und IDs. Anstelle von p- und div-Elementen können z.B. auch Überschriften (h1-h6) oder Listen (ul, ol, li) horizontal angeordnet werden.
  • Der Klassenname für das Elternelement kann beliebig gewählt werden.

Das Beispiel zum Download: beispiel.html
 
Größe der Boxen beeinflussen

Damit die Boxen gleichmäßig auf die Seitenbreite verteilt werden, sind zwei Schritte notwendig:

  1. Für jede Box muss eine Breite vorgegeben werden. Der Wert der Breite ist dabei nicht so wichtig (z.B. 100px).
  2. Für jede Box wird die Einstellung flex-grow: 1 festgelegt.
p{
  width: 100px;
  flex-grow: 1;
  margin-right: 20px;
}

Beispiel zum Download: beispiel-1.html

Wenn eine Box im Verhältnis zu den anderen Boxen doppelt oder dreifach so breit sein soll, dann muss ihr Wert für flex-grow auf 2 bzw. auf 3 gesetzt werden.

Beispiel zum Download: beispiel-2.html

Weitere Beispiele

Studieren Sie folgende Beispiele:

  • Beispiel 1 (Listenelemente in einer Reihe)
  • Beispiel 2 (Bilder mit Beschriftung in einer Reihe)
  • Beispiel 3 (Bild neben Text)
  • Beispiel 4 (mehrere Aufzählungen in einer Reihe)
  • Beispiel 5: Die Landingpage aus der oben beschriebenen Fallstudie wird so erweitert, dass ab 660px die Aufzählungspunkte horizontal angeordnet sind. Außerdem werden ab 1200px die drei Boxen in gleicher Breite nebeneinander angeordnet. Musterlösung:

Weitere Informationen:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

https://www.w3schools.com/css/css3_flexbox.asp

Aufgabe 1

Verwenden Sie die Flexbox auf Ihrer persönlichen Seite in mindestens zwei verschiedenen Szenarien. Denken Sie daran, die Flexbox-Einstellungen immer innerhalb einer media query zu platzieren, da im mobilen Layout bzw. bei sehr kleinen Bildschirmen stets alle Inhalte untereinander angeordnet werden sollen.

Aufgabe 2

Verändern Sie das oben gezeigte “Beispiel 1” so, dass die Listenelemente (li) die ganze Seitenbreite ausfüllen. Jedes li soll die gleiche Breite besitzen.

Aufgabe 3

Verändern Sie das oben gezeigte “Beispiel 3”: Neben der h1-Überschrift soll noch eine h2-Überschrift mit dem Inhalt “Eine kleine Übersicht” eingefügt werden:
flex_bild3

  • Fügen Sie die h2-Überschrift mit in den header ein.
  • Vergeben Sie für den header die Eigenschaft “display: flex”.
  • Verwenden Sie für den header außerdem die Eigenschaft “justify-content: space-between”, um beide Überschriften an den linken bzw. rechten Rand zu drücken.
  • Verwenden Sie für h1 innerhalb vom header die Eigenschaft “line-height: 0.9”, damit beide Überschriften auf der gleichen Höhe liegen. Von dieser Einstellung sollen aber nur die h1-Elemente innerhalb des headers betroffen sein!

Aufgabe 4 (Komplexaufgabe)

Gegeben ist folgende Webseite im mobilen Layout: kuehlhaus.html

Dazu gehören folgende Bilder (bitte erst anklicken und dann herunterladen):
img3

img2

img1

Ab einer Bildschirmbreite von 1150px soll das Layout folgenderweise geändert werden (anklicken zum Vergrößern):

Screenshot_2019-04-23 Kühlhaus Görlitz(1)

Folgende Arbeitsschritte sind notwendig:

  • Ergänzen Sie in der Media Query einen Eintrag für eine Klasse (z.B. “.flex_container”) mit der Eigenschaft “display: flex”. Setzen Sie diese Klasse im HTML-Code überall ein, wo eine horizontale Ausrichtung benötigt wird.
  • Stellen Sie in der Media Query für den header eine feste Höhe (height) von 81px ein (entspricht der Höhe vom Logo). Legen Sie außerdem in der Media Query für den header die Eigenschaft “justify-content: space-between;” fest.
  • Legen Sie in der Media Query für ul und li innerhalb des headers geeignete Werte für margin-top bzw. margin-right fest, um die Abstände zu korrigieren.
  • Die drei Logos im Abschnitt “Unsere Unterstützer” sollen gleichmäßig verteilt werden. Verwenden Sie die Eigenschaft “justify-content: space-around;” in der Media Query.
  • Die drei Boxen im Footer sollen die ganze Breite ausfüllen. Ergänzen Sie in der Media Query einen Eintrag für eine Klasse (z.B. “.flex_col”) mit der Eigenschaft “flex-grow: 1”. Ergänzen Sie diese Klasse im HTML-Code bei den drei Boxen im Footer. Hinweis: Ein Element kann mehrere Klassennamen gleichzeitig besitzen, diese müssen durch ein Leerzeichen getrennt werden. Beispiel:
    <div id="newsletter" class="text_box flex_col">
  • Die Box “Newsletter” soll ca. doppelt so groß sein wie die anderen beiden Boxen. Verwenden Sie die Eigenschaft “flex-grow: 2” in der Media Query.

Ergänzung zu Aufgabe 4 (Zusatzaufgabe)

Bei Aufgabe 4 werden ausschließlich quadratische Bilder mit den Abmessungen 500×500 Pixel verwendet. Damit lässt sich nicht für jede Bildschirmbreite ein ideales Layout gestalten.

Das Layout soll wie folgt verbessert werden:

capture

Beobachten Sie insbesondere, wie sich der jeweils angezeigte Bildausschnitt beim Skalieren des Fensters verändert!

Für diese Variante werden die Bilder in der originalen Auflösung benötigt:
img1_n

img2_n

img3_n

Folgende Arbeitsschritte sind notwendig:

  • Die Klasse “text_box” erhält einen padding von 5% (anstelle einer px-Angabe). Mit der prozentualen Angabe lässt sich später leichter rechnen.
  • Die min-width in der Media Query wird auf 640px heruntergesetzt.
  • Alle CSS-Angaben zur Klasse “img_box” werden entfernt.
  • Die img-Tags werden im HTML-Code entfernt. Stattdessen werden die Bilder bei dem umgebenden Div mit der Klasse “img_box” als Hintergrundbild eingefügt. Beispiel:
    <div class="img_box" style="height:640px; background-image: url('img1_n.jpg')"></div>
  • Für das Hintergrundbild müssen noch folgende CSS-Einstellungen festgelegt werden:
    .img_box{
    		
      background-position: bottom center;
      background-size: cover; 
      background-repeat: no-repeat;
    }
    

    Besonders wichtig ist die Einstellung für background-position: Sie sorgt dafür, dass der angezeigte Bildausschnitt immer auf der Bildmitte liegt!

  • Ab 640px soll die Text-Box 2/3 der Breite und das Bild 1/3 der Breite einnehmen. Das sind 66,66% Breite für die Text-Box und 33,33% Breite für das Bild. Die Text-Box erhält tatsächlich aber nur eine Breite von 56,66%, weil 2*5% bereits von der Padding-Einstellung verbraucht werden, die sich ebenfalls auf die Gesamtbreite auswirkt:
    .flex_container .text_box{
    			
       width:56.66%; /*wegen dem Padding: 56.66 + 2*5 = 66.66*/				
    }
    			
    .flex_container .img_box{
    			
       width: 33.33%;
    }
    
  • Eine zweite Media Query sorgt dafür, dass bei großen Bildschirmen die Text-Box genauso breit ist wie das Bild:
    @media screen and (min-width: 1300px){
    		
      .flex_container .text_box{
    			
    	width:40%; /*wegen Padding: 40 +2*5 = 50*/
    			
      }
    			
      .flex_container .img_box{
    			
    	width: 50%;
      }		
    }
    
  • Im HTML-Code wird in der Section mit der ID “kontakt” die Text-Box über das Bild gesetzt, denn im mobilen Layout soll der Text immer über dem Bild angezeigt werden.
  • Bei großen Bildschirmen soll dagegen das Bild zuerst, d.h. links vom Text angezeigt werden. Dies erreichen wir in der Media Query mit der CSS-Eigenschaft “order”:
    @media screen and (min-width: 640px){
      #kontakt .text_box{
    			
       order: 2;
     }
    			
     #kontakt .img_box{
    			
      order: 1;
     }
    
     ...
    

Comments are closed.