yofine
10/30/2013 - 3:51 PM

绿色区域的宽度为100%，其中有三个矩形，第一个矩形的宽度是200px，第二个和第三个矩形的宽度相等。使用CSS3中的功能实现它们的布局。 当box-flex: 0时，框的空间固定而不伸缩； 当 box-flex: n时，框的空间大约会按照剩余宽度的 n/m 伸缩，m为所有设定

绿色区域的宽度为100%，其中有三个矩形，第一个矩形的宽度是200px，第二个和第三个矩形的宽度相等。使用CSS3中的功能实现它们的布局。

当box-flex: 0时，框的空间固定而不伸缩； 当 box-flex: n时，框的空间大约会按照剩余宽度的 n/m 伸缩，m为所有设定了box-flex值的和。 当给有flex的box设定了大小时，该box将拥有设定的空间与flex分配的空间之和。

box-flex.html
content_copyfile_download
<div class="box">
    <div class="item">column 1</div>
    <div class="item">column 2</div>
    <div class="item">column 3</div>
</div>
box-flex.css
content_copyfile_download
.box 
   {
    background-color: #619B99;
    display: -webkit-box;
    height: 40px;
    padding: 10px;
    padding-right: 0px;
    width: 100%;}
.box>div {
    height: 40px;
    background-color: #EEEEEE;
    margin-right: 10px;
    -webkit-box-flex: 1;
    -moz-box-flex:1;
    -ms-box-flex:1;
    }
.box div:first-of-type {
    width: 200px;
    -webkit-box-flex: 0;
    -moz-box-flex:0;
    -ms-box-flex:0;
    }
better-one.html
content_copyfile_download
<!DOCTYPE html>
<html>
  <head>
  <style>
    .container {
      display: flex;
      width: 100%;
    }
    .item {
      height: 200px;
    }
    .item:nth-child(1) {
      flex: 0 0 200px;
      background-color: #5cacea;
    }
    .item:nth-child(2) {
      flex: 1 1 0;
      background-color: #8cacea;
    }
    .item:nth-child(3) {
      flex: 1 1 0;
      background-color: #1cacea;
    }
  </style>
  </head>
  <body>
    <div class="container">
      <div class="item">one</div>
      <div class="item">two</div>
      <div class="item">there</div>
    </div>
  </body>
</html>