css3/flexbox/flex-align-column.html

<!DOCTYPE html>
<html>
<style>
body {
    margin: 0;
}
.flexbox {
    width: 600px;
    height: 240px;
    display: -webkit-flex;
    background-color: #aaa;
    position: relative;
    -webkit-flex-flow: column;
}
.vertical {
    -webkit-writing-mode: vertical-lr;
}
.flexbox :nth-child(1) {
    background-color: blue;
}
.flexbox :nth-child(2) {
    background-color: green;
}
.flexbox :nth-child(3) {
    background-color: red;
}
.flexbox :nth-child(4) {
    background-color: yellow;
}
.flexbox :nth-child(5) {
    background-color: purple;
}
.flexbox :nth-child(6) {
    background-color: orange;
}
.flexbox :nth-child(7) {
    background-color: lime;
}
</style>
<script>
if (window.testRunner)
    testRunner.dumpAsText();
</script>
<script src="../../resources/check-layout.js"></script>
<body onload="checkLayout('.flexbox')">

<div class="flexbox">
    <div data-offset-x=0 data-expected-width=600 data-expected-height=40 style="-webkit-flex: 1;"></div>
    <div data-offset-x=0 data-expected-width=600 data-expected-height=40 style="-webkit-flex: 1; -webkit-align-self: stretch; "></div>
    <div data-offset-x=0 data-expected-width=20 data-expected-height=40 style="-webkit-flex: 1; -webkit-align-self: flex-start; width: 20px;"></div>
    <div data-offset-x=580 data-expected-width=20 data-expected-height=40 style="-webkit-flex: 1; -webkit-align-self: flex-end; width: 20px;"></div>
    <div data-offset-x=290 data-expected-width=20 data-expected-height=40 style="-webkit-flex: 1; -webkit-align-self: center; width: 20px;"></div>
    <div data-offset-x=0 data-expected-width=20 data-expected-height=40 style="-webkit-flex: 1; -webkit-align-self: baseline; width: 20px;"></div>
</div>

<div class="flexbox vertical">
    <div data-offset-y=0 data-expected-width=100 data-expected-height=240 style="-webkit-flex: 1;"></div>
    <div data-offset-y=0 data-expected-width=100 data-expected-height=240 style="-webkit-flex: 1; -webkit-align-self: stretch; "></div>
    <div data-offset-y=0 data-expected-width=100 data-expected-height=20 style="-webkit-flex: 1; -webkit-align-self: flex-start; height: 20px;"></div>
    <div data-offset-y=220 data-expected-width=100 data-expected-height=20 style="-webkit-flex: 1; -webkit-align-self: flex-end; height: 20px;"></div>
    <div data-offset-y=110 data-expected-width=100 data-expected-height=20 style="-webkit-flex: 1; -webkit-align-self: center; height: 20px;"></div>
    <div data-offset-y=0 data-expected-width=100 data-expected-height=20 style="-webkit-flex: 1; -webkit-align-self: baseline; height: 20px;"></div>
</div>

</body>
</html>