固比固布局 css3

最近写了一个小页面，里面用到了一种布局，就是有三栏，两侧的是固定的宽度，中间的那栏是根据浏览器屏幕的缩放而自动缩放。这个效果之前有写过，但是这次写出现了一个问题，就写下来。

这个效果最重要的元素是display：flex

HTML的代码：

<nav class="topbar">
<div class="topbar_lt">
<a class="logo" href="index.html"></a>
</div>
<input class="searchbox" type="text" placeholder="请输入关键词搜索">
<button class="search_txt">搜索</button>
</nav>

CSS的代码：

.topbar{
width:100%;
height:50px;
display:-webkit-flex;
display:flex;
}
.topbar_lt{
height:50px;
background:#f97500;
}
.logo{
width:34px;
background:#fff url(../images/icon.png) 1px -1px; display:inline-block;
border-radius: 34px;
margin: 6px 9px 0 6px;
}
.searchbox{
height:30px;
margin:10px;
-webkit-flex:1;
flex:1;
line-height:30px;
border-radius: 20px;
overflow:hidden;
outline:none;
text-indent:2em;
color:#666;
border:0;
outline:none;
background:#fff3e9 url(../images/icon.png) -190px -6px no-repeat;
}
.searchbox:focus{
background:#fff url(../images/icon.png) -190px -6px no-repeat;
}
.search_txt{
width:50px;
height:50px;
border:none;
outline:none;
color:#fff;
border-left:1px solid #ff8f33;
}

实现的效果是：



当浏览器缩小的时候效果是这样的：



它的布局并没有改变。

这里要注意的是要有一个大的外边框把这三栏包起来，在这个外边框即要父级中加display：flex，（这个目前的浏览器不怎么兼容，各个浏览器要加上内核前缀，例如：display: -webkit-flex; display:-ms-flex; display:-moz-flex; 但是最好把display：flex放在最后。）左右两栏就像平时那样写，不需要写float：left或float：right。因为flex已经把它们处理成一行了。只要在中间那栏里面加上flex：1；就可以了（最好还是加上兼容性的前缀了）。

这次我出错的地方是在input标签中加了个父级，但是我却在input里设置flex，所以一直没出效果。