CSS 3 灵活的 Box Model

Alex Russell之前有许多很有意思的讨论-当前网络上的哪些东西是错误的！他最近的一篇帖子提到了CSS 3 progress和一个特别灵活的box model：

David Baron（Mozilla公司）编写了一个灵活的Box Layout Module，又名“hbox and vbox”（横向盒和纵向盒）。使用Gecko和WebKit的浏览器都能支持hbox 和 vbox。你应该忽略IE浏览器，这样你创建box布局将会更容易。

    /* hbox and vbox classes */
     
      .hbox {
              display: -webkit-box;
              -webkit-box-orient: horizontal;
              -webkit-box-align: stretch;
       
              display: -moz-box;
              -moz-box-orient: horizontal;
              -moz-box-align: stretch;

       
              display: box;
              box-orient: horizontal;
              box-align: stretch;
      }
       
      .hbox> * {
              -webkit-box-flex: 0;
              -moz-box-flex: 0;
              box-flex: 0;
              display: block;
      }
       
      .vbox {
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-box-align: stretch;
       
              display: -moz-box;
              -moz-box-orient: vertical;

              -moz-box-align: stretch;
       
              display: box;
              box-orient: vertical;
              box-align: stretch;
      }
       
      .vbox> * {
              -webkit-box-flex: 0;
              -moz-box-flex: 0;
              box-flex: 0;
              display: block;
      }
       
      .spacer {
              -webkit-box-flex: 1;
              -moz-box-flex: 1;
              box-flex: 1;
      }
       
      .reverse {
              -webkit-box-direction: reverse;
              -moz-box-direction: reverse;
              box-direction: reverse;
      }
       
      .boxFlex0 {
              -webkit-box-flex: 0;
             -moz-box-flex: 0;
              box-flex: 0;
      }
       
      .boxFlex1, .boxFlex {
              -webkit-box-flex: 1;
              -moz-box-flex: 1;
              box-flex: 1;
      }
       
      .boxFlex2 {
              -webkit-box-flex: 2;
              -moz-box-flex: 2;

              box-flex: 2;
      }
       
      .boxGroup1 {
              -webkit-box-flex-group: 1;
              -moz-box-flex-group: 1;
              box-flex-group: 1;
      }
       
      .boxGroup2 {
              -webkit-box-flex-group: 2;
              -moz-box-flex-group: 2;
              box-flex-group: 2;
      }
       
      .start {
              -webkit-box-pack: start;
              -moz-box-pack: start;
              box-pack: start;
      }
       
      .end {
              -webkit-box-pack: end;
              -moz-box-pack: end;
              box-pack: end;
      }
       
      .center {
              -webkit-box-pack: center;
              -moz-box-pack: center;
              box-pack: center;

      }

有了这个核心的CSS，你就可以轻松的做到垂直对齐

<div class="hbox center">
    <div class="vbox center">
        <div>...</div>
        <div>...</div>
    </div>
</div>

分组：

<form action="handler.cgi" method="POST" class="hbox">
        <div class="vbox">
                <label>First Name (required):</label>
                <label>Last Name:</label>
        </div>
        <div class="vbox">
                <input type="text" name="first"/>
                <input type="text" name="last"/>
                <input type="submit"/>
        </div>
</form>

点击查看文章详情：http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/