基础选项卡展开以填充容器中的所有可用水平空间？

Question

我正在努力将现有应用程序的一部分重写到Foundation Framework 6.现在我正在使用Foundation Tabs，我正在尝试使用标签进行水平扩展以填充所有可用的水平空间。这样做是为了匹配以前版本的网站的外观。

我在jsfiddle的一个例子中找到了解决方案。不幸的是它仍然是这样的：

Current tab placement

以下是jsfiddle：https://jsfiddle.net/9j6vpdm3/1/示例中当前进度的链接

这个jsfiddle是我能在StackOverflow（Justified tabs in Foundation for Apps project）中找到的最接近答案的示例实现。不幸的是，这个解决方案不起作用，因为你可以看到标签仍然是左对齐的，仍然有足够的水平空间可用。

我通过谷歌在Zurb论坛上找到了其他解决方案，但答案太旧了，建议的链接不再有效。

是否有一个技巧让基础选项卡动态扩展以填满所有可用的水平空间？

$(document).foundation();

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation.min.js"></script>


<style>
 div.tabs .tab-item {
    flex-grow: 1;
    text-align: center;
}
 </style>
 <div style="text-align: center">
   <ul class="tabs" id="example-tabs" data-tabs>
      <li class="tabs-title"><a href="#panel-0" aria-selected="true">Title 1</a></li>
      <li class="tabs-title"><a href="#panel-1" aria-selected="true">Title 2</a></li>
      <li class="tabs-title"><a href="#panel-2" aria-selected="true">Title 3</a></li>
      <li class="tabs-title"><a href="#panel-3" aria-selected="true">Title 4</a></li>
    </ul>
</div>

 <div class="tabs-content" data-tabs-content="example-tabs">
    <div class="tabs-panel" id="panel-0">
        <p>Content1 </p>
    </div>
    <div class="tabs-panel" id="panel-1">
        <p>Content 2 </p>
    </div>
    <div class="tabs-panel" id="panel-2">
        <p>Content 3 </p>
    </div>
    <div class="tabs-panel" id="panel-3">
        <p>Content 4 </p>
    </div>
  </div>

Answer 1

您可以使用flexbox执行此操作，几乎可以使用您尝试控制的直接子项的任何容器。

使用flex父级，子级可以通过设置flex属性来扩展以均匀填充空间。 flex：1 0 0;

示例：https://codepen.io/rafibomb/pen/NJyYQE

.tabs {
  display: flex;

  .tabs-title {
    flex: 1 0 0;
    text-align: center;

    & + .tabs-title {
      border-left: 1px solid #ddd;
    }
  }
}