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

聊聊 CSS 实现自适应导航栏

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

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

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

图片

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

图片

一、两种不完美实现

假设布局是这样的：

<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-14575-0.html聊聊 CSS 实现自适应导航栏

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

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

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

标签：

热门焦点

小米官宣：2023年上半年出货量中国第一！

今日早间，小米电视官方微博带来消息，称2023年小米电视上半年出货量达到了中国第一，同时还表示小米电视的巨屏风暴即将开始。“公布一个好消息2023年#小米电视上半年出货量中国
Rust中的高吞吐量流处理

作者 | Noz编译 | 王瑞平本篇文章主要介绍了Rust中流处理的概念、方法和优化。作者不仅介绍了流处理的基本概念以及Rust中常用的流处理库，还使用这些库实现了一个流处理程序
如何正确使用:Has和:Nth-Last-Child

我们可以用CSS检查，以了解一组元素的数量是否小于或等于一个数字。例如，一个拥有三个或更多子项的grid。你可能会想，为什么需要这样做呢？在某些情况下，一个组件或一个布局可能会
.NET 程序的 GDI 句柄泄露的再反思

一、背景1. 讲故事上个月我写过一篇如何洞察 C# 程序的 GDI 句柄泄露文章，当时用的是 GDIView + WinDbg 把问题搞定，前者用来定位泄露资源，后者用来定位泄露代码，后面有朋友反
Python异步IO编程的进程/线程通信实现

这篇文章再讲3种方式，同时讲4中进程间通信的方式一、 Python 中线程间通信的实现方式共享变量共享变量是多个线程可以共同访问的变量。在Python中，可以使用threading模块中的L
雅柏威士忌多款单品价格大跌，泥煤顶流也不香了？

来源 | 烈酒商业观察编 | 肖海林今年以来，威士忌市场开始出现了降温迹象，越来越多不断暴涨的网红威士忌也开始悄然回归市场理性。近日，LVMH集团旗下苏格兰威士忌品牌雅柏（Ardbeg
花7万退货退款无门：谁在纵容淘宝珠宝商家造假？

来源：极点商业作者：杨铭在淘宝购买珠宝玉石后，因为保证金不够赔付，店铺关闭，退货退款难、维权无门的比比皆是。“提供相关产品鉴定证书，支持全国复检，可以30天无理由退换货。&
余承东:AI大模型技术的发展将会带来下一代智能终端操作系统的智慧体验

8月4日消息，2023年华为开发者大会（HDC.Together）今天正式开幕，华为发布HarmonyOS 4、全新升级的鸿蒙开发套件、HarmonyOS Next开发者预览版本等一系列
荣耀Magic4 至臻版首创智慧隐私通话强劲影音系统

2022年第一季度临近尾声，在该季度内，许多品牌陆续发布自己的最新产品，让大家从全新的角度来了解当今的手机技术。手机是电子设备中，更新迭代十分迅速的一款产品，基