完整代码可以查看:
四、总结一下
这样一个实用的布局小技巧,你学到了吗?下面总结一下
移动端导航栏一般都是标题整体居中的,并且右侧的工具栏是不固定的
传统的标题flex自适应和绝对定位都有一定的局限性
在剩余空间充足情况下, flex:1可以让左右两边布局尺寸相同,这样中间标题看着就是居中的了
在剩余空间不足情况下,中间标题空间会撑满剩余空间,超长则出现省略号
grid 和 flex 原理相同,有一个1fr单位也可以做到均等分布的效果
一般布局都可以通过 CSS 来实现,足够灵活,不到万不得已,都不要考虑 JS。最后,如果觉得还不错,对你有帮助的话,欢迎点赞、在看、转发❤❤❤
[1]CSS Appbar grid (juejin.cn): https://code.juejin.cn/pen/7291692696299634727
[2]CSS Appbar flex (codepen.io): https://codepen.io/xboxyan/pen/poGoPWj
[3]CSS Appbar grid (juejin.cn): https://code.juejin.cn/pen/7291696160866041906
[4]CSS Appbar grid (codepen.io): https://codepen.io/xboxyan/pen/mdvdmBz