现在你得导航还在用float来设置水平排列吗? 随着css的强大新的属性的增加,浏览器的内核升级,让我们的代码越写越简单,以前我们在写代码设置某一块水平排列用的最多的应该是float了吧,80后的程序员最有感受,深受低版本浏览器的残害(IE6),乃至现在还会随手敲一个float出来(包括我)。不过现在好了,随着浏览器的内核升级,很多企业也已抛弃低版本浏览器,css的很多新属性就可以用到了,我们今天就用这个新属性flex做个导航水平排列,如下:
- 首页
- 关于我们
- 产品展示
- 客户支持
- 联系我们
html
css
.navbar{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
}
Flex 是 Flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。 我们来测试一下他的兼容性
复制代码