在移动端应用中，经常会碰到这样的导航栏，导航栏左边通常是一个返回按钮，中间是标题，右边是工具栏，如下：
图片
值得注意的是，右侧的工具栏是不固定的，有可能有多个，也有可能没有，并且中间的标题是整体居中的，如果标题过长，还能出现省略号，各种适应场景如下：
图片
假设布局是这样的：
<appbar> <tool> <a class="icon back"></a> </tool> <h2 class="title">我是标题</h2> <tool class="right"> <a class="link">规则</a> </tool></appbar>很多同学可能会直接用 flex 布局让标题自动填充剩余空间，然后设置文本居中。
appbar{ display: flex}.title{ flex: 1; text-align: center;}这种布局在左右功能区宽度差不多的时候还好，看着像居中的，一旦右边的宽度差异很大，就看着不居中了。
图片
还有一种是绝对定位，可以实现整体居中。
.title{ position: absolute; left: 0; right: 0; text-align: center;}但是，一旦文本过长，就会和左右的功能区发生重叠，如下：
图片
那么，有没有办法可以同时满足这两种情况呢？
下面介绍两个方法
还是前面的 flex 布局，相信大家都用过flex:1这样的属性，它可以让子元素平均分配剩余空间。
.item{ flex: 1}如果有3个子元素，那么就会平分为3等分。
图片
如果仅仅设置左右两边的flex:1，中间宽度不设置，那么中间部分的宽度就自适应内容宽度，由于两边宽度相等，「因此中间的文本看着就是整体居中的」。
图片
当左右空间不足以均分剩余空间时，会自动压缩另一个空间。
图片
直到中间部分不足以放下文本内容，出现省略号。
图片
按照这个原理，先将左右两边设置平均分布。
tool{ flex:1;}这样标题就是整体居中的了。
图片
然后，只需要将右边菜单居右展示就行了，比如用flex中的justify-content。
.right{ display: flex; justify-content: end;}这样就就可以很轻松的实现文章开头的效果。
图片
完整代码可以查看：
grid 布局也能和能轻易的实现这种效果，原理也基本一致。
和flex中的flex:1比较类似的是，grid中也有一个单位也能做到均等分布的效果，那就是1fr。
div{ display: grid; grid-template-columns: 1fr auto 1fr;}这样3个子容器，中间是自适应宽度，左右是自动等分的。
图片
原理和前面相同，这里就不重复了，关键实现如下：
appbar{ display: grid; grid-template-columns: 1fr auto 1fr;}.right{ justify-content: end;}这样也能实现我们想要的效果：
图片
完整代码可以查看：
这样一个实用的布局小技巧，你学到了吗？下面总结一下：
本文链接：http://www.28at.com/showinfo-26-14604-0.html聊聊 CSS 实现自适应导航栏
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号