CSS 的 flex 布局比 float 方便。
一、实现 flex 布局
.box { display:flex; }二、justify-content
可以理解为横向布局方式。
flex-start：左对齐。
flex-end：右对齐。
center：居中对齐。
space-between：分散对齐，第 1 个元素贴到最左，最后 1 个元素贴到最右。
space-around：分散对齐，类似于每个元素的 margin-left、margin-right 都相等。
以 space-between 为例，做一个导航菜单，就比较方便了，代码如下：
<style type="text/css">
.nav { width:1200px; background:#009; }
.nav ul { display:flex; margin:0; padding:0; width:100%; justify-content:space-between; }
.nav ul li { display:block; margin:0; padding:0; width:100%; list-style:none; }
.nav ul li a { display:block; text-align:center; line-height:50px; font-size:14px; color:#fff; text-decoration:none; }
</style>
<div class="wrapper nav">
<ul>
<li><a href="./">网站首页</a></li>
<li><a href="1.htm">机构职能</a></li>
<li><a href="2.htm">领导简介</a></li>
<li><a href="3.htm">动态信息</a></li>
</ul>
</div>上述，给 li 指定了 width:100%，它限定在 nav 的 1/4 宽度内（因为有 4 个 li），如果不指定 100%，它的宽度是其文字内容的宽度。
另外，虽然 li 为 block，但是其 margin、padding 并非自动变成 0，所以需要我们指定一下。
三、align-items
可以理解 为纵向布局方式。
flex-start：顶对齐。
flex-end：底对齐。
center：居中对齐。
stretch：拉升对齐。
baseline：第一行文字的基线对齐。
更多内容，我觉得这篇文章写得不错：Flex 布局教程：语法篇 - 阮一峰的网络日志 (ruanyifeng.com)
