7 background-color: grey;
9 -webkit-align-content: flex-start;
24 -webkit-writing-mode: horizontal-tb;
27 -webkit-writing-mode: horizontal-bt;
30 -webkit-writing-mode: vertical-rl;
33 -webkit-writing-mode: vertical-lr;
36 -webkit-flex-flow: row;
39 -webkit-flex-flow: row-reverse;
42 -webkit-flex-flow: column;
45 -webkit-flex-flow: column-reverse;
48 -webkit-flex-wrap: wrap;
51 -webkit-flex-wrap: wrap-reverse;
53 .flexbox > :nth-child(1) {
54 background-color: #0f0;
56 .flexbox > :nth-child(2) {
57 background-color: #0d0;
59 .flexbox > :nth-child(3) {
60 background-color: #090;
62 .flexbox > :nth-child(4) {
63 background-color: #060;
65 .flexbox > :nth-child(5) {
66 background-color: #030;
69 <script src="../../resources/check-layout.js"></script>
70 <body onload="checkLayout('.flexbox')">
79 'child1': [30, 5, 0, 0],
80 'child2': [30, 10, 30, 0],
81 'child3': [60, 5, 0, 10],
82 'child4': [70, 20, 0, 15],
83 'child5': [60, 10, 0, 35],
87 'child1': [30, 5, 0, 40],
88 'child2': [30, 10, 30, 35],
89 'child3': [60, 5, 0, 30],
90 'child4': [70, 20, 0, 10],
91 'child5': [60, 10, 0, 0],
97 'child1': [30, 5, 30, 0],
98 'child2': [30, 10, 0, 0],
99 'child3': [60, 5, 0, 10],
100 'child4': [70, 20, -10, 15],
101 'child5': [60, 10, 0, 35],
105 'child1': [30, 5, 30, 40],
106 'child2': [30, 10, 0, 35],
107 'child3': [60, 5, 0, 30],
108 'child4': [70, 20, -10, 10],
109 'child5': [60, 10, 0, 0],
116 'flexbox': [600, 60],
117 'child1': [5, 30, 0, 0],
118 'child2': [10, 30, 0, 30],
119 'child3': [5, 60, 10, 0],
120 'child4': [20, 70, 15, 0],
121 'child5': [10, 60, 35, 0],
124 'flexbox': [600, 60],
125 'child1': [5, 30, 595, 0],
126 'child2': [10, 30, 590, 30],
127 'child3': [5, 60, 585, 0],
128 'child4': [20, 70, 565, 0],
129 'child5': [10, 60, 555, 0],
134 'flexbox': [600, 60],
135 'child1': [5, 30, 595, 0],
136 'child2': [10, 30, 590, 30],
137 'child3': [5, 60, 585, 0],
138 'child4': [20, 70, 565, 0],
139 'child5': [10, 60, 555, 0],
142 'flexbox': [600, 60],
143 'child1': [5, 30, 0, 0],
144 'child2': [10, 30, 0, 30],
145 'child3': [5, 60, 10, 0],
146 'child4': [20, 70, 15, 0],
147 'child5': [10, 60, 35, 0],
155 'child1': [30, 5, 30, 0],
156 'child2': [30, 10, 0, 0],
157 'child3': [60, 5, 0, 10],
158 'child4': [70, 20, -10, 15],
159 'child5': [60, 10, 0, 35],
163 'child1': [30, 5, 30, 40],
164 'child2': [30, 10, 0, 35],
165 'child3': [60, 5, 0, 30],
166 'child4': [70, 20, -10, 10],
167 'child5': [60, 10, 0, 0],
173 'child1': [30, 5, 0, 0],
174 'child2': [30, 10, 30, 0],
175 'child3': [60, 5, 0, 10],
176 'child4': [70, 20, 0, 15],
177 'child5': [60, 10, 0, 35],
181 'child1': [30, 5, 0, 40],
182 'child2': [30, 10, 30, 35],
183 'child3': [60, 5, 0, 30],
184 'child4': [70, 20, 0, 10],
185 'child5': [60, 10, 0, 0],
192 'flexbox': [600, 60],
193 'child1': [5, 30, 0, 30],
194 'child2': [10, 30, 0, 0],
195 'child3': [5, 60, 10, 0],
196 'child4': [20, 70, 15, -10],
197 'child5': [10, 60, 35, 0],
200 'flexbox': [600, 60],
201 'child1': [5, 30, 595, 30],
202 'child2': [10, 30, 590, 0],
203 'child3': [5, 60, 585, 0],
204 'child4': [20, 70, 565, -10],
205 'child5': [10, 60, 555, 0],
210 'flexbox': [600, 60],
211 'child1': [5, 30, 595, 30],
212 'child2': [10, 30, 590, 0],
213 'child3': [5, 60, 585, 0],
214 'child4': [20, 70, 565, -10],
215 'child5': [10, 60, 555, 0],
218 'flexbox': [600, 60],
219 'child1': [5, 30, 0, 30],
220 'child2': [10, 30, 0, 0],
221 'child3': [5, 60, 10, 0],
222 'child4': [20, 70, 15, -10],
223 'child5': [10, 60, 35, 0],
233 'child1': [30, 5, 0, 40],
234 'child2': [30, 10, 30, 35],
235 'child3': [60, 5, 0, 30],
236 'child4': [70, 20, 0, 10],
237 'child5': [60, 10, 0, 0],
241 'child1': [30, 5, 0, 0],
242 'child2': [30, 10, 30, 0],
243 'child3': [60, 5, 0, 10],
244 'child4': [70, 20, 0, 15],
245 'child5': [60, 10, 0, 35],
251 'child1': [30, 5, 30, 40],
252 'child2': [30, 10, 0, 35],
253 'child3': [60, 5, 0, 30],
254 'child4': [70, 20, -10, 10],
255 'child5': [60, 10, 0, 0],
259 'child1': [30, 5, 30, 0],
260 'child2': [30, 10, 0, 0],
261 'child3': [60, 5, 0, 10],
262 'child4': [70, 20, -10, 15],
263 'child5': [60, 10, 0, 35],
270 'flexbox': [600, 60],
271 'child1': [5, 30, 0, 30],
272 'child2': [10, 30, 0, 0],
273 'child3': [5, 60, 10, 0],
274 'child4': [20, 70, 15, -10],
275 'child5': [10, 60, 35, 0],
278 'flexbox': [600, 60],
279 'child1': [5, 30, 595, 30],
280 'child2': [10, 30, 590, 0],
281 'child3': [5, 60, 585, 0],
282 'child4': [20, 70, 565, -10],
283 'child5': [10, 60, 555, 0],
288 'flexbox': [600, 60],
289 'child1': [5, 30, 595, 30],
290 'child2': [10, 30, 590, 0],
291 'child3': [5, 60, 585, 0],
292 'child4': [20, 70, 565, -10],
293 'child5': [10, 60, 555, 0],
296 'flexbox': [600, 60],
297 'child1': [5, 30, 0, 30],
298 'child2': [10, 30, 0, 0],
299 'child3': [5, 60, 10, 0],
300 'child4': [20, 70, 15, -10],
301 'child5': [10, 60, 35, 0],
309 'child1': [30, 5, 30, 40],
310 'child2': [30, 10, 0, 35],
311 'child3': [60, 5, 0, 30],
312 'child4': [70, 20, -10, 10],
313 'child5': [60, 10, 0, 0],
317 'child1': [30, 5, 30, 0],
318 'child2': [30, 10, 0, 0],
319 'child3': [60, 5, 0, 10],
320 'child4': [70, 20, -10, 15],
321 'child5': [60, 10, 0, 35],
327 'child1': [30, 5, 0, 40],
328 'child2': [30, 10, 30, 35],
329 'child3': [60, 5, 0, 30],
330 'child4': [70, 20, 0, 10],
331 'child5': [60, 10, 0, 0],
335 'child1': [30, 5, 0, 0],
336 'child2': [30, 10, 30, 0],
337 'child3': [60, 5, 0, 10],
338 'child4': [70, 20, 0, 15],
339 'child5': [60, 10, 0, 35],
346 'flexbox': [600, 60],
347 'child1': [5, 30, 0, 0],
348 'child2': [10, 30, 0, 30],
349 'child3': [5, 60, 10, 0],
350 'child4': [20, 70, 15, 0],
351 'child5': [10, 60, 35, 0],
354 'flexbox': [600, 60],
355 'child1': [5, 30, 595, 0],
356 'child2': [10, 30, 590, 30],
357 'child3': [5, 60, 585, 0],
358 'child4': [20, 70, 565, 0],
359 'child5': [10, 60, 555, 0],
364 'flexbox': [600, 60],
365 'child1': [5, 30, 595, 0],
366 'child2': [10, 30, 590, 30],
367 'child3': [5, 60, 585, 0],
368 'child4': [20, 70, 565, 0],
369 'child5': [10, 60, 555, 0],
372 'flexbox': [600, 60],
373 'child1': [5, 30, 0, 0],
374 'child2': [10, 30, 0, 30],
375 'child3': [5, 60, 10, 0],
376 'child4': [20, 70, 15, 0],
377 'child5': [10, 60, 35, 0],
387 'child1': [5, 30, 40, 0],
388 'child2': [10, 30, 35, 30],
389 'child3': [5, 60, 30, 0],
390 'child4': [20, 70, 10, 0],
391 'child5': [10, 60, 0, 0],
395 'child1': [5, 30, 0, 0],
396 'child2': [10, 30, 0, 30],
397 'child3': [5, 60, 10, 0],
398 'child4': [20, 70, 15, 0],
399 'child5': [10, 60, 35, 0],
405 'child1': [5, 30, 40, 30],
406 'child2': [10, 30, 35, 0],
407 'child3': [5, 60, 30, 0],
408 'child4': [20, 70, 10, -10],
409 'child5': [10, 60, 0, 0],
413 'child1': [5, 30, 0, 30],
414 'child2': [10, 30, 0, 0],
415 'child3': [5, 60, 10, 0],
416 'child4': [20, 70, 15, -10],
417 'child5': [10, 60, 35, 0],
425 'child1': [30, 5, 30, 0],
426 'child2': [30, 10, 0, 0],
427 'child3': [60, 5, 0, 10],
428 'child4': [70, 20, -10, 15],
429 'child5': [60, 10, 0, 35],
433 'child1': [30, 5, 30, 15],
434 'child2': [30, 10, 0, 10],
435 'child3': [60, 5, 0, 5],
436 'child4': [70, 20, -10, -15],
437 'child5': [60, 10, 0, -25],
443 'child1': [30, 5, 30, 15],
444 'child2': [30, 10, 0, 10],
445 'child3': [60, 5, 0, 5],
446 'child4': [70, 20, -10, -15],
447 'child5': [60, 10, 0, -25],
451 'child1': [30, 5, 30, 0],
452 'child2': [30, 10, 0, 0],
453 'child3': [60, 5, 0, 10],
454 'child4': [70, 20, -10, 15],
455 'child5': [60, 10, 0, 35],
463 'child1': [5, 30, 40, 30],
464 'child2': [10, 30, 35, 0],
465 'child3': [5, 60, 30, 0],
466 'child4': [20, 70, 10, -10],
467 'child5': [10, 60, 0, 0],
471 'child1': [5, 30, 0, 30],
472 'child2': [10, 30, 0, 0],
473 'child3': [5, 60, 10, 0],
474 'child4': [20, 70, 15, -10],
475 'child5': [10, 60, 35, 0],
481 'child1': [5, 30, 40, 0],
482 'child2': [10, 30, 35, 30],
483 'child3': [5, 60, 30, 0],
484 'child4': [20, 70, 10, 0],
485 'child5': [10, 60, 0, 0],
489 'child1': [5, 30, 0, 0],
490 'child2': [10, 30, 0, 30],
491 'child3': [5, 60, 10, 0],
492 'child4': [20, 70, 15, 0],
493 'child5': [10, 60, 35, 0],
501 'child1': [30, 5, 0, 0],
502 'child2': [30, 10, 30, 0],
503 'child3': [60, 5, 0, 10],
504 'child4': [70, 20, 0, 15],
505 'child5': [60, 10, 0, 35],
509 'child1': [30, 5, 0, 15],
510 'child2': [30, 10, 30, 10],
511 'child3': [60, 5, 0, 5],
512 'child4': [70, 20, 0, -15],
513 'child5': [60, 10, 0, -25],
519 'child1': [30, 5, 0, 15],
520 'child2': [30, 10, 30, 10],
521 'child3': [60, 5, 0, 5],
522 'child4': [70, 20, 0,-15],
523 'child5': [60, 10, 0, -25],
527 'child1': [30, 5, 0, 0],
528 'child2': [30, 10, 30, 0],
529 'child3': [60, 5, 0, 10],
530 'child4': [70, 20, 0, 15],
531 'child5': [60, 10, 0, 35],
541 'child1': [5, 30, 0, 0],
542 'child2': [10, 30, 0, 30],
543 'child3': [5, 60, 10, 0],
544 'child4': [20, 70, 15, 0],
545 'child5': [10, 60, 35, 0],
549 'child1': [5, 30, 40, 0],
550 'child2': [10, 30, 35, 30],
551 'child3': [5, 60, 30, 0],
552 'child4': [20, 70, 10, 0],
553 'child5': [10, 60, 0, 0],
559 'child1': [5, 30, 0, 30],
560 'child2': [10, 30, 0, 0],
561 'child3': [5, 60, 10, 0],
562 'child4': [20, 70, 15, -10],
563 'child5': [10, 60, 35, 0],
567 'child1': [5, 30, 40, 30],
568 'child2': [10, 30, 35, 0],
569 'child3': [5, 60, 30, 0],
570 'child4': [20, 70, 10, -10],
571 'child5': [10, 60, 0, 0],
579 'child1': [30, 5, 0, 0],
580 'child2': [30, 10, 30, 0],
581 'child3': [60, 5, 0, 10],
582 'child4': [70, 20, 0, 15],
583 'child5': [60, 10, 0, 35],
587 'child1': [30, 5, 0, 15],
588 'child2': [30, 10, 30, 10],
589 'child3': [60, 5, 0, 5],
590 'child4': [70, 20, 0, -15],
591 'child5': [60, 10, 0, -25],
597 'child1': [30, 5, 0, 15],
598 'child2': [30, 10, 30, 10],
599 'child3': [60, 5, 0, 5],
600 'child4': [70, 20, 0, -15],
601 'child5': [60, 10, 0, -25],
605 'child1': [30, 5, 0, 0],
606 'child2': [30, 10, 30, 0],
607 'child3': [60, 5, 0, 10],
608 'child4': [70, 20, 0, 15],
609 'child5': [60, 10, 0, 35],
617 'child1': [5, 30, 0, 30],
618 'child2': [10, 30, 0, 0],
619 'child3': [5, 60, 10, 0],
620 'child4': [20, 70, 15, -10],
621 'child5': [10, 60, 35, 0],
625 'child1': [5, 30, 40, 30],
626 'child2': [10, 30, 35, 0],
627 'child3': [5, 60, 30, 0],
628 'child4': [20, 70, 10, -10],
629 'child5': [10, 60, 0, 0],
635 'child1': [5, 30, 0, 0],
636 'child2': [10, 30, 0, 30],
637 'child3': [5, 60, 10, 0],
638 'child4': [20, 70, 15, 0],
639 'child5': [10, 60, 35, 0],
643 'child1': [5, 30, 40, 0],
644 'child2': [10, 30, 35, 30],
645 'child3': [5, 60, 30, 0],
646 'child4': [20, 70, 10, 0],
647 'child5': [10, 60, 0, 0],
655 'child1': [30, 5, 30, 0],
656 'child2': [30, 10, 0, 0],
657 'child3': [60, 5, 0, 10],
658 'child4': [70, 20, -10, 15],
659 'child5': [60, 10, 0, 35],
663 'child1': [30, 5, 30, 15],
664 'child2': [30, 10, 0, 10],
665 'child3': [60, 5, 0, 5],
666 'child4': [70, 20, -10, -15],
667 'child5': [60, 10, 0, -25],
673 'child1': [30, 5, 30, 15],
674 'child2': [30, 10, 0, 10],
675 'child3': [60, 5, 0, 5],
676 'child4': [70, 20, -10, -15],
677 'child5': [60, 10, 0, -25],
681 'child1': [30, 5, 30, 0],
682 'child2': [30, 10, 0, 0],
683 'child3': [60, 5, 0, 10],
684 'child4': [70, 20, -10, 15],
685 'child5': [60, 10, 0, 35],
692 function mainAxisDirection(writingMode, flexDirection)
694 if ((writingMode.indexOf('horizontal') != -1 && flexDirection.indexOf('row') != -1)
695 || (writingMode.indexOf('vertical') != -1 && flexDirection.indexOf('column') != -1))
700 function addChild(flexbox, mainAxis, crossAxis, preferredSize, crossAxisLength, expectations)
702 var child = document.createElement('div');
703 child.setAttribute('style', '-webkit-flex: 1 0 ' + preferredSize + 'px;'
704 + crossAxis + ': ' + crossAxisLength + 'px;');
706 child.setAttribute("data-expected-width", expectations[0]);
707 child.setAttribute("data-expected-height", expectations[1]);
708 child.setAttribute("data-offset-x", expectations[2]);
709 child.setAttribute("data-offset-y", expectations[3]);
711 flexbox.appendChild(child);
714 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-rl', 'vertical-lr'];
715 var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse'];
716 var directions = ['ltr', 'rtl'];
717 var wraps = ['wrap', 'wrap-reverse'];
719 writingModes.forEach(function(writingMode) {
720 flexDirections.forEach(function(flexDirection) {
721 directions.forEach(function(direction) {
722 wraps.forEach(function(wrap) {
723 var flexboxClassName = writingMode + ' ' + direction + ' ' + flexDirection + ' ' + wrap;
724 var title = document.createElement('div');
725 title.className = 'title';
726 title.innerHTML = flexboxClassName;
727 document.body.appendChild(title);
729 var mainAxis = mainAxisDirection(writingMode, flexDirection);
730 var crossAxis = (mainAxis == 'width') ? 'height' : 'width';
732 var flexbox = document.createElement('div');
733 flexbox.className = 'flexbox ' + flexboxClassName;
734 flexbox.setAttribute('style', mainAxis + ': 60px');
736 var testExpectations = expectations[writingMode][flexDirection][direction][wrap];
737 addChild(flexbox, mainAxis, crossAxis, 25, 5, testExpectations['child1']);
738 addChild(flexbox, mainAxis, crossAxis, 25, 10, testExpectations['child2']);
739 addChild(flexbox, mainAxis, crossAxis, 25, 5, testExpectations['child3']);
740 addChild(flexbox, mainAxis, crossAxis, 70, 20, testExpectations['child4']);
741 addChild(flexbox, mainAxis, crossAxis, 5, 10, testExpectations['child5']);
743 flexbox.setAttribute("data-expected-width", testExpectations.flexbox[0]);
744 flexbox.setAttribute("data-expected-height", testExpectations.flexbox[1]);
746 document.body.appendChild(flexbox);