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

而不是为每个项目设置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

Answer 2

对于flexbox，您可以使用flex属性指定元素长度。研究基于flex的，flex-shrink和flex-grow。移除宽度并将flex设置为auto;

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;
}

所有导航菜单项

2 个答案:

jsFiddle