当前位置：首页 > 科技 > 软件

聊聊 CSS 实现自适应导航栏

来源：责编：时间：2023-10-23 17:05:33 185观看

导读在移动端应用中，经常会碰到这样的导航栏，导航栏左边通常是一个返回按钮，中间是标题，右边是工具栏，如下：图片值得注意的是，右侧的工具栏是不固定的，有可能有多个，也有可能没有，并且中间的标题是整体居中的，如果标题过长，还能出现省

在移动端应用中，经常会碰到这样的导航栏，导航栏左边通常是一个返回按钮，中间是标题，右边是工具栏，如下：

图片

值得注意的是，右侧的工具栏是不固定的，有可能有多个，也有可能没有，并且中间的标题是整体居中的，如果标题过长，还能出现省略号，各种适应场景如下：

图片

一、两种不完美实现

假设布局是这样的：

<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 布局，相信大家都用过flex:1这样的属性，它可以让子元素平均分配剩余空间。

.item{  flex: 1}

如果有3个子元素，那么就会平分为3等分。

图片

如果仅仅设置左右两边的flex:1，中间宽度不设置，那么中间部分的宽度就自适应内容宽度，由于两边宽度相等，「因此中间的文本看着就是整体居中的」。

图片

当左右空间不足以均分剩余空间时，会自动压缩另一个空间。

图片

直到中间部分不足以放下文本内容，出现省略号。

图片

按照这个原理，先将左右两边设置平均分布。

tool{  flex:1;}

这样标题就是整体居中的了。

图片

然后，只需要将右边菜单居右展示就行了，比如用flex中的justify-content。

.right{  display: flex;  justify-content: end;}

这样就就可以很轻松的实现文章开头的效果。

图片

完整代码可以查看：

CSS Appbar flex (juejin.cn)[1]
CSS Appbar flex (codepen.io)[2]

三、grid 布局实现

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;}

这样也能实现我们想要的效果：

图片

完整代码可以查看：

CSS Appbar grid (juejin.cn)[3]
CSS Appbar grid (codepen.io)[4]

四、总结一下

这样一个实用的布局小技巧，你学到了吗？下面总结一下：

移动端导航栏一般都是标题整体居中的，并且右侧的工具栏是不固定的
传统的标题flex自适应和绝对定位都有一定的局限性
在剩余空间充足情况下， flex:1可以让左右两边布局尺寸相同，这样中间标题看着就是居中的了
在剩余空间不足情况下，中间标题空间会撑满剩余空间，超长则出现省略号
grid 和 flex 原理相同，有一个1fr单位也可以做到均等分布的效果

本文链接：//www.dmpip.com//www.dmpip.com/showinfo-26-14575-0.html聊聊 CSS 实现自适应导航栏

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： Golang数组：全面指南与实际示例

下一篇：通过Spring MVC 实现 Restful 风格请求支持

标签：

热门焦点

一加Ace2 Pro真机揭晓钛空灰配色质感拉满

终于，在经过了几波预热之后，一加Ace2 Pro的外观真机图在网上出现了。还是博主数码闲聊站曝光的，这次的外观设计还是延续了一加11的方案，只是细节上有了调整，例如新加入了钛空灰
7月安卓手机性价比榜：努比亚+红魔两款新机入榜

7月登场的新机有努比亚Z50S Pro和红魔8S Pro，除了三星之外目前唯二的两款搭载超频版骁龙8Gen2处理器的产品，而且努比亚和红魔也一贯有着不错的性价比，所以在本次的性价比榜单
女孩租房开2小时空调用完100元电费引热议：5级能耗惹不起月薪过万电费也交不起

近日，江苏苏州一女孩租房当天充值了100元电费，开着空调不到2小时发现电费已用完。对于为什么这个快，房东表示，电表坏了这种情况很多，之前也遇到过，给租客换
CSS单标签实现转转logo

转转品牌升级后更新了全新的Logo，今天我们用纯CSS来实现转转的新Logo，为了有一定的挑战性，这里我们只使用一个标签实现，将最大化的使用CSS能力完成Logo的绘制与动画效果。新logo
十个简单但很有用的Python装饰器

装饰器（Decorators）是Python中一种强大而灵活的功能，用于修改或增强函数或类的行为。装饰器本质上是一个函数，它接受另一个函数或类作为参数，并返回一个新的函数或类。它们通常用
谷歌KDD'23工作：如何提升推荐系统Ranking模型训练稳定性

谷歌在KDD 2023发表了一篇工作，探索了推荐系统ranking模型的训练稳定性问题，分析了造成训练稳定性存在问题的潜在原因，以及现有的一些提升模型稳定性方法的不足，并提出了一种新
三万字盘点 Spring 九大核心基础功能

大家好，我是三友~~今天来跟大家聊一聊Spring的9大核心基础功能。话不多说，先上目录：图片友情提示，本文过长，建议收藏，嘿嘿嘿！一、资源管理资源管理是Spring的一个核心的基础功能，不
重估百度丨大模型，能撑起百度的“今天”吗?

自象限原创作者｜程心罗辑2023年之前，对于自己的“今天”，百度也很迷茫。“新业务到 2022 年底还是 0，希望 2023 年出来一个 1。”这是2022年底，李彦宏
iQOO 11S评测：行业唯一的200W标准版旗舰

【Techweb评测】去年底，iQOO推出了“电竞旗舰”iQOO 11系列，作为一款性能强机，该机不仅全球首发2K 144Hz E6全感屏，搭载了第二代骁龙8平台及144Hz电竞