首页 前端知识 CSS-自适应导航栏(flex | grid)

CSS-自适应导航栏(flex | grid)

2024-02-02 09:02:19 前端知识 前端哥 389 371 我要收藏
目标:实现左右各有按钮,中间是内容,自适应显示中间的内容导航栏,即 根据中间的宽度大小显示内容。

自适应导航栏

总结:推荐 flex布局 / grid布局

flex布局: 两侧 flex:1; ----->中间自适应

grid布局:1fr ---->代码为 grid-template-columns: 1fr auto 1fr;

主要参考文章:CSS 实现自适应导航栏


法一:(flex方法)

父盒子设置弹性布局 display: flex;

中间的盒子为 flex:1 ,再设置文本居中

问题:看着像居中,一旦右边宽度差异很大,就不居中了。

 左右侧有按钮,中间部分自适应居中。

flex:1; 让子元素平均分配剩余空间

3个子元素都设置 flex: 1; ,就会平分3等分。

法二:绝对定位

子元素 绝对定位position: absolute; left: 0;right: 0; text-align: center;),可实现整体居中

问题:文本过长,则左右功能区会发生重叠。

法三:flex布局(推荐)

 flex布局实现:若 仅设置两边的 flex:1;,中间宽度不设置,那么中间的宽度会自适应内容宽度。 --->两边宽度相等,中间居中。

法四: grid布局:1fr(推荐)

display: grid;

grid-template-columns: 1fr auto 1fr;

grid中的 1fr,类似于 flex 中的 flex:1;

 


参考:

css导航自适应div - 老白网络

【web】一个自适应的导航栏前端设计(只含HTML+CSS)-CSDN博客

https://www.cnblogs.com/mllt/p/web-img-text-align-center.html

css自适应头部导航栏 - 老白网络

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1068.html
标签
评论
发布的文章

Ajax用法总结

2024-02-14 09:02:07

JQuery之jsTree树形插件

2024-02-14 09:02:01

Why React Doesn‘t Need jQuery?

2024-02-14 09:02:00

jQuery模板字符串

2024-02-14 09:02:58

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!