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

聊聊 CSS 实现自适应导航栏

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

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

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

图片

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

图片

一、两种不完美实现

假设布局是这样的：

<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单位也可以做到均等分布的效果

本文链接：http://www.28at.com/showinfo-26-14604-0.html聊聊 CSS 实现自适应导航栏

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

上一篇： Python高频面试题——如何在字符串中删除指定字符

下一篇：面试官：怎么让Spring扫描我们自定义的注解？

标签：

热门焦点

Redmi Pad评测：红米充满野心的一次尝试

从Note系列到K系列，从蓝牙耳机到笔记本电脑，红米不知不觉之间也已经形成了自己颇有竞争力的产品体系，在中端和次旗舰市场上甚至要比小米新机的表现来得更好，正所谓“大丈夫生居
7月安卓手机好评榜：三星S23Ultra好评率第一

性能榜和性价比榜之后，我们来看最后的安卓手机好评榜，数据来源安兔兔评测，收集时间2023年7月1日至7月31日，仅限国内市场。第一名：三星Galaxy S23 Ultra好评率：95.71%在即将迎来新
8月总票房已突破10亿！《封神》第一：口碑已经成了

8月5日消息，据灯塔专业版数据，截至8月5日9时35分，8月总票房（含预售）已突破10亿。其中，《封神》以大比分的优势领先。根据官方消息，目前该片总票房已经超过14.
JVM优化：实战OutOfMemoryError异常

一、Java堆溢出堆内存中主要存放对象、数组等，只要不断地创建这些对象，并且保证 GC Roots 到对象之间有可达路径来避免垃圾收集回收机制清除这些对象，当这些对象所占空间超过
每天一道面试题-CPU伪共享

前言：了不起：又到了每天一到面试题的时候了！学弟，最近学习的怎么样啊了不起学弟：最近学习的还不错，每天都在学习，每天都在进步！了不起：那你最近学习的什么呢？了不起学弟：最近在学习C
ESG的面子与里子

来源 | 光子星球撰文 | 吴坤谚编辑 | 吴先之三伏大幕拉起，各地高温预警不绝，但处于厄尔尼诺大“烤”之下的除了众生，还有各大企业发布的ESG报告。ESG是“环境保
iQOO 11S新品发布会

iQOO将在7月4日19:00举行新品发布会，推出杭州亚运会电竞赛事官方用机iQOO 11S。
2299元起！iQOO Pad明晚首销：性能最强天玑平板

5月23日，iQOO如期举行了新品发布会，除了首发安卓最强旗舰处理器的iQOO Neo8系列新机外，还在发布会上推出了旗下首款平板电脑——iQOO Pad，其最大的卖点
微软发布Windows 11新版引入全新任务栏状态

近日，微软发布了Windows 11新版，而Build 22563更新主要引入了几周前曝光的平板模式任务栏等，系统更流畅了。更新中，Windows 11加入了专门针对平板优化的任务栏