CSS-自适应导航栏（flex | grid）

目标：实现左右各有按钮，中间是内容，自适应显示中间的内容导航栏，即 根据中间的宽度大小显示内容。

自适应导航栏

总结：推荐 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自适应头部导航栏 - 老白网络