117 lines
2.7 KiB
HTML
117 lines
2.7 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>flex and grid items honor self alignment</title>
|
|
<style>
|
|
html, body { margin: 0; }
|
|
#flex {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
width: 300px;
|
|
height: 100px;
|
|
background: #f08c00;
|
|
}
|
|
#flex-center {
|
|
align-self: center;
|
|
width: 40px;
|
|
height: 20px;
|
|
background: #087f5b;
|
|
}
|
|
#flex-end {
|
|
align-self: flex-end;
|
|
width: 50px;
|
|
height: 30px;
|
|
background: #1971c2;
|
|
}
|
|
#grid {
|
|
display: grid;
|
|
grid-template-columns: 150px 150px 150px;
|
|
grid-template-rows: 120px;
|
|
width: 450px;
|
|
height: 120px;
|
|
margin-top: 20px;
|
|
background: #ffd43b;
|
|
}
|
|
#grid-end {
|
|
align-self: center;
|
|
justify-self: end;
|
|
width: 40px;
|
|
height: 30px;
|
|
background: #c2255c;
|
|
}
|
|
#grid-center {
|
|
align-self: end;
|
|
justify-self: center;
|
|
width: 50px;
|
|
height: 20px;
|
|
background: #6741d9;
|
|
}
|
|
#grid-place {
|
|
place-self: center end;
|
|
width: 30px;
|
|
height: 40px;
|
|
background: #0b7285;
|
|
}
|
|
#grid-items {
|
|
display: grid;
|
|
grid-template-columns: 150px 150px;
|
|
grid-template-rows: 100px;
|
|
place-items: end center;
|
|
width: 300px;
|
|
height: 100px;
|
|
margin-top: 20px;
|
|
background: #e9fac8;
|
|
}
|
|
#parent-one {
|
|
width: 40px;
|
|
height: 20px;
|
|
background: #e03131;
|
|
}
|
|
#parent-two {
|
|
width: 60px;
|
|
height: 30px;
|
|
background: #2b8a3e;
|
|
}
|
|
#flex-content {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-content: space-between;
|
|
width: 120px;
|
|
height: 120px;
|
|
margin-top: 20px;
|
|
background: #d0ebff;
|
|
}
|
|
#line-one, #line-two {
|
|
width: 70px;
|
|
height: 20px;
|
|
}
|
|
#line-one { background: #f76707; }
|
|
#line-two { background: #1098ad; }
|
|
#grid-content {
|
|
display: grid;
|
|
grid-template-columns: 100px;
|
|
grid-template-rows: 50px 50px;
|
|
place-content: center end;
|
|
width: 200px;
|
|
height: 200px;
|
|
margin-top: 20px;
|
|
background: #fff3bf;
|
|
}
|
|
#track-one, #track-two {
|
|
width: 100px;
|
|
height: 50px;
|
|
}
|
|
#track-one { background: #7048e8; }
|
|
#track-two { background: #37b24d; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="flex"><div id="flex-center"></div><div id="flex-end"></div></div>
|
|
<div id="grid"><div id="grid-end"></div><div id="grid-center"></div><div id="grid-place"></div></div>
|
|
<div id="grid-items"><div id="parent-one"></div><div id="parent-two"></div></div>
|
|
<div id="flex-content"><div id="line-one"></div><div id="line-two"></div></div>
|
|
<div id="grid-content"><div id="track-one"></div><div id="track-two"></div></div>
|
|
</body>
|
|
</html>
|