1<!DOCTYPE html>
2<html>
3<style>
4body {
5 margin: 0;
6}
7.container {
8 position: relative;
9 background-color: pink;
10 outline: 1px solid black;
11 display: inline-block;
12}
13.flexbox {
14 display: -webkit-flex;
15 background-color: grey;
16 width: 100px;
17 height: 100px;
18 margin: 20px;
19}
20.flexbox > * {
21 -webkit-flex: none;
22}
23.row {
24 -webkit-flex-flow: row;
25}
26.row-reverse {
27 -webkit-flex-flow: row-reverse;
28}
29.column {
30 -webkit-flex-flow: column;
31}
32.column-reverse {
33 -webkit-flex-flow: column-reverse;
34}
35.flexbox > :nth-child(1) {
36 background-color: blue;
37 margin: auto;
38}
39</style>
40<script src="../../resources/check-layout.js"></script>
41<body onload="checkLayout('.flexbox')">
42
43<div class="container">
44 <div class="flexbox row">
45 <div data-offset-x=60 data-offset-y=20 style="width: 20px; height: 120px"></div>
46 </div>
47</div>
48
49<div class="container">
50 <div class="flexbox row-reverse">
51 <div data-offset-x=60 data-offset-y=20 style="width: 20px; height: 120px"></div>
52 </div>
53</div>
54
55<div class="container">
56 <div class="flexbox column">
57 <div data-offset-x=20 data-offset-y=60 style="width: 120px; height: 20px"></div>
58 </div>
59</div>
60
61<div class="container">
62 <div class="flexbox column-reverse">
63 <div data-offset-x=20 data-offset-y=60 style="width: 120px; height: 20px"></div>
64 </div>
65</div>
66</body>
67</html>