third_party/WebKit/LayoutTests/css3/flexbox/columns-center-with-margins-and-wrap.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <link href="resources/flexbox.css" rel="stylesheet">
   5  <style>
   6     .flexbox {
   7       border: 1px solid black;
   8       width: 400px;
   9       height: 200px;
  10     }
  11     .item1 {
  12       margin: 0 auto;
  13       background: lightblue;
  14     }
  15     .item2 {
  16       background: lime;
  17     }
  18   </style>
  19 </head>
  20 <body>
  21   <div class="flexbox column wrap">
  22     <div class="item1">centeredWithMargins</div>
  23     <div class="item2 align-self-center">centeredWithAlignSelf</div>
  24     <div class="item2 align-self-center">centeredWithAlignSelf</div>
  25     <div class="item2 align-self-center">centeredWithAlignSelf</div>
  26     <div class="item2 align-self-center">centeredWithAlignSelf</div>
  27     <div class="item2 align-self-center">centeredWithAlignSelf</div>
  28     <div class="item2 align-self-center">centeredWithAlignSelf</div>
  29     <div class="item2 align-self-center">centeredWithAlignSelf</div>
  30     <div class="item2 align-self-center">centeredWithAlignSelf</div>
  31     <div class="item2 align-self-center">centeredWithAlignSelf</div>
  32     <div class="item2 align-self-center">centeredWithAlignSelf</div>
  33     <div class="item2 align-self-center">centeredWithAlignSelf</div>
  34     <div class="item2 align-self-center">centeredWithAlignSelf</div>
  35     <div class="item2 align-self-center">centeredWithAlignSelf</div>
  36     <div class="item2 align-self-center">centeredWithAlignSelf</div>
  37   </div>
  38 </body>
  39 </html>