文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

聊聊 CSS 实现自适应导航栏

2024-11-30 06:41

关注

图片

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

图片

一、两种不完美实现

假设布局是这样的:


  
    
  
  

我是

规则

很多同学可能会直接用 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;
}

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

图片

完整代码可以查看:

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

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

图片

完整代码可以查看:

四、总结一下

这样一个实用的布局小技巧,你学到了吗?下面总结一下:

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

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯