Question

我使用display:flex

进行了以下导航

#header-nav { display: flex; flex-grow: 1; background: #707276; background: rgba(112,114,118,0.75); }

#header-nav .nav-item { display: flex; flex-grow: 1; flex-basis: 0; }
#header-nav .nav-link { display: block; color: #ffffff; display: flex; flex-grow: 1; justify-content: center; align-items: center; white-space: nowrap; }

#header-nav > .nav-item > .nav-link { box-sizing: border-box; text-transform: uppercase; text-decoration: none; padding: 15px 0; position: relative; transition: color 0.5s ease-in-out; font-size: 115.385%; font-family: VegurRegular; }
#header-nav > .nav-item > .nav-link:hover { color: #000000; }
#header-nav > .nav-item > .nav-link:after { content: ''; display: block; position: absolute; bottom: 0; left: 0; right: 0; height: 5px; opacity: 0; transition: opacity 0.5s ease-in-out; background-color: #36383a; }
#header-nav > .nav-item > .nav-link:hover:after { opacity: 0.8; }


#header-nav .home { flex-grow: 0; flex-basis: auto; padding: 0 50px; }
#header-nav .nav-item.home > .nav-link { display: block; }
#header-nav .nav-item.home > .nav-link:after { display: none; }

<ul id="header-nav">
    <li class="nav-item home">
        <a href="/" class="nav-link">
            <span id="logo-text" class="sprite">Logo</span>
        </a>
    </li>
    <li class="nav-item">
        <a href="#shop" class="nav-link">Shop</a>
    </li>
    <li class="nav-item">
        <a href="#tiling" class="nav-link">Tiling Ideas</a>
    </li>
    <li class="nav-item">
        <a href="#advice" class="nav-link">Advice</a>
    </li>
    <li class="nav-item">
        <a href="#retailers" class="nav-link">Find a Retailer</a>
    </li>
</ul>

正如您所看到的，徽标保持相同的宽度，而其余的则是响应式的。但是，如果您使用全页链接然后使屏幕的宽度变小，您将看到链接开始相互重叠。有没有办法阻止使用flex发生这种情况？

我知道我可以找到一个使用显示表来实现同样目的的路线，但我更喜欢使用display flex。

Answer 1

尝试删除white-space: nowrap;，因为它本身没有响应。

#header-nav {
  display: flex;
  flex-grow: 1;
  background: #707276;
  background: rgba(112, 114, 118, 0.75);
}
#header-nav .nav-item {
  display: flex;
  flex: 1;
}
#header-nav .nav-link {
  color: #ffffff;
  display: flex;
  flex-grow: 1;
  text-align: center;
  justify-content: center;
  align-items: center;
  align-content: center;
}
#header-nav > .nav-item > .nav-link {
  box-sizing: border-box;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 0;
  position: relative;
  transition: color 0.5s ease-in-out;
  font-size: 115.385%;
  font-family: VegurRegular;
}
#header-nav > .nav-item > .nav-link:hover {
  color: #000000;
}
#header-nav > .nav-item > .nav-link:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 5px;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  background-color: #36383a;
}
#header-nav > .nav-item > .nav-link:hover:after {
  opacity: 0.8;
}
#header-nav .home {
  flex-grow: 0;
  flex-basis: auto;
  padding: 0 50px;
}
#header-nav .nav-item.home > .nav-link {
  display: block;
}
#header-nav .nav-item.home > .nav-link:after {
  display: none;
}

<ul id="header-nav">
  <li class="nav-item home">
    <a href="/" class="nav-link">
      <span id="logo-text" class="sprite">Logo</span>
    </a>
  </li>
  <li class="nav-item">
    <a href="#shop" class="nav-link">Shop</a>
  </li>
  <li class="nav-item">
    <a href="#tiling" class="nav-link">Tiling Ideas</a>
  </li>
  <li class="nav-item">
    <a href="#advice" class="nav-link">Advice</a>
  </li>
  <li class="nav-item">
    <a href="#retailers" class="nav-link">Find a Retailer</a>
  </li>
</ul>

或者，请考虑使用媒体查询来缩小屏幕尺寸较小的字体大小。

停止弹性重叠

1 个答案: