align-items

Mit der Flex-Box-Eigenschaft "align-items" können die Anordnung der Elemente auf einer Achse bestimmt werden. Die Richtung der Achse selbst wird mit "flex-direction" definiert. Bei horizontaler Richtung (row) ist die Höhe der Elemente ausschalggebend. Bei vertikaler (column) Richtung ist die Breite der Elemente ausschalggebend.

align-items:flex-start;
Die Elemente werden an der Oberkante ausgerichtet.
align-items:flex-end;
Die Elemente werden an der Unterkante ausgerichtet
align-items:center;
Die Elemente werden mittig ausgerichtet.
align-items:stretch;
Die Flex-Items werden in der Höhe ausgedehnt. Hier darf man den Flex-items keine Höhe oder Breite zuweisen, je nach Richtung der Achse.
align-items:baseline;
Die Flex-Items werden an der Grundlinie der inliegenden Schrift der ersten Zeile ausgerichtet.

Der Quelltext wurde erfolgreich in die Zwischenablage kopiert.

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 Flex CSS - align-items</title>
	<style>
    	#container {
		width:100%;
		height:360px;
		background: lightgrey;
		display: flex;
		align-items:flex-start;
	}
	div#box1 {
		background: SteelBlue;
		border: 1px solid black;
		width: 50px;
		height: 50px;
	 }
	 div#box2 {
	 	font-size: 2em;
		background: SteelBlue;
		border: 1px solid black;
		width:100px;
		height: 100px;
	 }
	 div#box3 {
		background: SteelBlue;
		border: 1px solid black;
		width: 150px;
		height: 150px;
	 }
	</style>
</head>
<body>
	<div id="container">
		<div id="box1">Box 1</div>
		<div id="box2">Box 2</div>
		<div id="box3">Box 3</div>
	</div>
</body>
</html>


 

            

Anregungen

Verändere die CSS-Eigenschaft "align-items:flex-start;" und untersuche das wechselnde Verhalten der Div-Elemente. Es gillt, die unterschiedlich grossen Boxen, anzuordnen. Folgende Möglichkeiten stehen zur Verfügung:

align-items:flex-start;     
align-items:flex-end;
align-items:center;
align-items:stretch;
align-items:baseline;

In vielen Fällen muss zusätzlich die Richtung der Elemente angegeben werden. So wird die CSS-Eigenschaft "flex-direction" gleichzeitig angewendet. Schreibe sie zusätzlich in den Flex-Container. Folgende Möglichkeiten stehen zur Verfügung:

flex-direction:row;
flex-direction:row-reverse;
flex-direction:column;
flex-direction:column-reverse;

DB-Table: align-items