最近写了一个小页面，里面用到了一种布局，就是有三栏，两侧的是固定的宽度，中间的那栏是根据浏览器屏幕的缩放而自动缩放。这个效果之前有写过，但是这次写出现了一个问题，就写下来。
这个效果最重要的元素是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，所以一直没出效果。