Source code
Revision control
Copy as Markdown
Other Tools
<?xml version="1.0" encoding="UTF-8"?>
<!--
Any copyright is dedicated to the Public Domain.
-->
<!-- Reference case for align-items / align-self behavior, using blocks in
place of flex items and using float and width keywords to emulate the
align-items / align-self properties. -->
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
<style>
.flexbox {
border: 1px solid blue;
width: 200px;
font-size: 10px;
}
div.big {
font-size: 20px;
width: 50px;
}
.flexbox > * {
clear: both;
}
/* Classes for each of the various align-self values */
.flex-start {
background: lime;
float: left;
}
.flex-end {
background: orange;
float: right;
}
.center {
background: lightblue;
margin: auto;
}
.baseline {
background: teal;
float: left;
}
.stretch {
background: pink;
width: 100%;
}
.auto {
background: yellow;
margin: auto;
}
.unspecified {
background: lightgreen;
margin: auto;
}
.initial {
background: aqua;
margin: auto;
}
.inherit {
background: violet;
float: right;
}
<!-- We center shrinkwrapped text by putting it into an inline-block, and
then wrapping that inline-block in a helper-div that has
"text-align:center" set. -->
.centerParent {
text-align: center;
}
.centerParent > * {
display: inline-block;
text-align: left; /* Keep parent's centering from tweaking my text */
}
</style>
</head>
<body>
<div class="flexbox">
<div class="flex-start">start</div>
<div class="flex-start big">a b c d e f</div>
<div class="flex-end">end</div>
<div class="flex-end big">a b c d e f</div>
<div class="centerParent">
<div class="center">center</div>
</div>
<div class="center big">a b c d e f</div>
<div class="baseline">base</div>
<div class="baseline big">abc</div>
<div class="stretch">stretch</div>
<div class="stretch big">a b c d e f</div>
<div class="centerParent">
<div class="auto">auto</div>
</div>
<div class="centerParent">
<div class="unspecified">unspec</div>
</div>
<div class="centerParent">
<div class="initial">initial</div>
</div>
<div class="inherit">inherit</div>
<!-- Since the last div is floated, the container doesn't include
its height by default. So we add some invisible hacky text (of the
same font) to make sure our container is tall enough. -->
<span style="visibility:hidden">hacky text</span>
</div>
</body>
</html>