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)