所有导航菜单项中文本的左右间距相等

Question

我正在使用 flexbox 创建导航菜单，我想确保每个单词左右两侧的文本完全一致。

现在，框的响应非常均匀，但是当单词的字符与其他字符不匹配时，单词周围的空间不再均匀。

这是我的小提琴：https://jsfiddle.net/omarel/p204jjnr/2/

header {
  display: flex;
  position: fixed;
  bottom: 0px;
  width: 100%;
  background-color: #000;
  padding: 50px;
}
header .tab {
  color: #fff;
  width: 16.66%;
  height: 70px;
  border: 1px solid red;
  text-align: center;
  font-size: 2.4vw;
  vertical-align: middle;
  line-height: 70px;
}
/* BORDER BOXING  */

header,
header .tab {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

<header>
  <div class="tab">home</div>
  <div class="tab">hello</div>
  <div class="tab">longer word</div>
  <div class="tab">short</div>
  <div class="tab">Neighborhood</div>
  <div class="tab">Floor Plans</div>
  <div class="tab">Views</div>
</header>

更新： 解决方案是以下答案的组合： 添加 flex:auto 和从 header .tab 中删除宽度

Answer 1

对于 flexbox，您可以使用 flex 属性来指定元素的长度。查看 flex-basis、flex-shrink 和 flex-grow。删除宽度并将您的 flex 设置为自动；

header .tab{
    color: #fff;
    flex: auto;
    height: 70px;
    border: 1px solid red;
    text-align: center;
    font-size: 2.4vw;
    vertical-align: middle;
    line-height: 70px;
}

Answer 2

而不是为每个项目设置width：

width: 16.66%

让宽度为自动（基于内容）并使用padding：

width: 16.66% <-- REMOVE
padding: 0 20px

现在，文本左右的空间在所有选项卡中都是一致的。

这是您的代码的简化版本：

header {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  background-color: #000;
  padding: 50px;
}
header .tab {
  padding: 0 20px;
  height: 70px;
  font-size: 2.4vw;
  color: #fff;
  border: 1px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

<header>
  <div class="tab">home</div>
  <div class="tab">hello</div>
  <div class="tab">longer word</div>
  <div class="tab">short</div>
  <div class="tab">Neighborhood</div>
  <div class="tab">Floor Plans</div>
  <div class="tab">Views</div>
</header>

jsFiddle