警告:本站服务器将于2020-7-10到期,不再续费,本站如果有大家需要的资料赶紧备份,谢谢!另:我会陆陆续续将本站一些文章放入github上,请关注我。
当前位置:W3Cbest前端开发>HTML/CSS>用display:flex新属性做个导航排列

用display:flex新属性做个导航排列

原创2018-09-06HTML/CSS1241 次阅读 · 读完需要 2 分钟。

现在你得导航还在用float来设置水平排列吗?

随着css的强大新的属性的增加,浏览器的内核升级,让我们的代码越写越简单,以前我们在写代码设置某一块水平排列用的最多的应该是float了吧,80后的程序员最有感受,深受低版本浏览器的残害(IE6),乃至现在还会随手敲一个float出来(包括我)。不过现在好了,随着浏览器的内核升级,很多企业也已抛弃低版本浏览器,css的很多新属性就可以用到了,我们今天就用这个新属性flex做个导航水平排列,如下:

html

<ul class="navbar">
  <li><a href="/">首页</a></li>
  <li><a href="/">关于我们</a></li>
  <li><a href="/">产品展示</a></li>
  <li><a href="/">客户支持</a></li>
  <li><a href="/">联系我们</a></li>
</ul>

css

.navbar{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
}

Flex 是 Flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。

我们来测试一下他的兼容性

复制代码

赞(0) 打赏
未经允许不得转载:W3Cbest前端开发>用display:flex新属性做个导航排列

相关推荐

发表评论