mirror of
https://github.com/fergalmoran/ladybird.git
synced 2026-02-16 12:47:31 +00:00
41 lines
1.2 KiB
HTML
41 lines
1.2 KiB
HTML
<!DOCTYPE html><style>
|
|
* {
|
|
border: 1px solid black !important;
|
|
}
|
|
body {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.outer {
|
|
display: flex;
|
|
width: 150px;
|
|
height: 150px;
|
|
background: wheat;
|
|
}
|
|
.outer > div {
|
|
position: absolute;
|
|
width: 150px;
|
|
height: 50px;
|
|
background: orange;
|
|
}
|
|
.normal { align-items: normal; }
|
|
.stretch { align-items: stretch; }
|
|
.flex-start { align-items: flex-start; }
|
|
.flex-end { align-items: flex-end; }
|
|
.start { align-items: start; }
|
|
.end { align-items: end; }
|
|
.center { align-items: center; }
|
|
.self-start { align-items: self-start; }
|
|
.self-end { align-items: self-end; }
|
|
</style>
|
|
<body>
|
|
<div class="outer normal"><div>normal</div></div>
|
|
<div class="outer stretch"><div>stretch</div></div>
|
|
<div class="outer start"><div>start</div></div>
|
|
<div class="outer flex-start"><div>flex-start</div></div>
|
|
<div class="outer end"><div>end</div></div>
|
|
<div class="outer flex-end"><div>flex-end</div></div>
|
|
<div class="outer center"><div>center</div></div>
|
|
<div class="outer self-start"><div>self-start</div></div>
|
|
<div class="outer self-end"><div>self-end</div></div>
|