基础标签扩展以填充容器中所有可用的水平空间？

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属性来扩展以均匀填充空间。屈曲: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;
    }
  }
}

Answer 2

@rafibomb的回答是正确的，并且可以工作，但您也可以利用Foundation内置的Utility类。

您可以将flex-container类添加到ul.tabs元素，并将flex-child-auto类添加到每个li.tabs-title元素。

下面是一个示例：

<div style="text-align: center">
   <ul class="tabs flex-container" id="example-tabs" data-tabs>
      <li class="tabs-title flex-child-auto"><a href="#panel-0" aria-selected="true">Title 1</a></li>
      <li class="tabs-title flex-child-auto"><a href="#panel-1" aria-selected="true">Title 2</a></li>
      <li class="tabs-title flex-child-auto"><a href="#panel-2" aria-selected="true">Title 3</a></li>
      <li class="tabs-title flex-child-auto"><a href="#panel-3" aria-selected="true">Title 4</a></li>
    </ul>
</div>