Depot43-Unterlagen - align-self

HTML Elemente
            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 Flex CSS - align-self</title>
	<style>
	#container {
		width:100%;
		height:360px;
		background: lightgrey;
		display: flex;
	}
	div {
		background: SteelBlue;
		border: 1px solid black;
		height:100px;
		width:300px;
		font-size:1.5em;
	 } 
		#box1 {align-self:flex-start;}
		#box2 {align-self:flex-end;}
		#box3 {align-self:center;}
		#box4 {align-self:strech;height:auto;}
		#box5 {align-self:baseline;font-size:1em;height:auto;border:none;background:none;}
		#box6 {align-self:baseline;font-size:2em;border:none;background:none;}
	</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 id="box4">Box 4</div>
		<div id="box5">Box 5 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
		<div id="box6">Box 6</div>
	</div>
</body>
</html>


 

            