绿色区域的宽度为100%,其中有三个矩形,第一个矩形的宽度是200px,第二个和第三个矩形的宽度相等。使用CSS3中的功能实现它们的布局。
当box-flex: 0时,框的空间固定而不伸缩; 当 box-flex: n时,框的空间大约会按照剩余宽度的 n/m 伸缩,m为所有设定了box-flex值的和。 当给有flex的box设定了大小时,该box将拥有设定的空间与flex分配的空间之和。
<div class="box">
<div class="item">column 1</div>
<div class="item">column 2</div>
<div class="item">column 3</div>
</div>
.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;
}
<!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>