Alex Russell之前有許多很有意思的討論-當前網絡上的哪些東西是錯誤的！他最近的一篇帖子提到了CSS 3 progress和一個特別靈活的box model：

David Baron編寫了一個靈活的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>
    <div>
        <div>...</div>
        <div>...</div>
    </div>
</div>

分組：

以下為引用的內容：

<form action="handler.cgi" method="POST">
        <div>
                <label>First Name :</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/

原文地址：http://www.javaeye.com/news/10046-css-box-model