Framework7中如何为Tabbar标签页设置宽度权重？

当然可以实现这个需求！Framework7的Tabbar组件基于flex布局构建，默认会让所有标签页均分宽度，但我们可以通过自定义CSS轻松调整每个标签的宽度占比，实现你想要的左右各25%、中间占剩余50%的布局。

方法一：添加自定义类（更清晰易维护） #

首先给每个标签页添加自定义类，方便我们在CSS中精准定位：

<div class="toolbar tabbar">
  <div class="toolbar-inner">
    <a href="#tab-1" class="tab-link tab-link-active tab-left">Left Tab</a>
    <a href="#tab-2" class="tab-link tab-center">Center Tab</a>
    <a href="#tab-3" class="tab-link tab-right">Right Tab</a>
  </div>
</div>

然后编写CSS覆盖默认样式：

/* 给左右标签设置固定25%宽度 */
.tabbar .toolbar-inner .tab-left,
.tabbar .toolbar-inner .tab-right {
  flex: 0 0 25%; /* flex-grow:0, flex-shrink:0, flex-basis:25%，固定宽度不伸缩 */
  max-width: 25%;
}

/* 中间标签占据剩余所有空间 */
.tabbar .toolbar-inner .tab-center {
  flex: 1; /* 自动填充剩余的50%宽度 */
}

方法二：使用CSS选择器（无需修改HTML） #

如果你不想改动HTML结构，可以直接通过nth-child选择器定位三个标签：

/* 第一个和第三个标签设置25%宽度 */
.tabbar .toolbar-inner .tab-link:nth-child(1),
.tabbar .toolbar-inner .tab-link:nth-child(3) {
  flex: 0 0 25%;
  max-width: 25%;
}

/* 第二个标签填充剩余空间 */
.tabbar .toolbar-inner .tab-link:nth-child(2) {
  flex: 1;
}

原理说明 #

Framework7默认给.tab-link设置了flex: 1，这意味着每个标签会均分父容器（.toolbar-inner）的宽度。我们通过将左右标签的flex-basis设为25%并禁止伸缩，让它们固定宽度；中间标签保留flex:1，就会自动占据剩下的所有空间，刚好是50%的宽度。

内容的提问来源于stack exchange，提问作者Guvenc Usanmaz