链接显示为两行（React，css）

Question

我有一些Header:

<header>
 <div>                              
  <Link to="/" class="navbar-brand">Home</Link>
  <Link to="/test" class="navbar-brand">Test</Link>
  <Link to="/test2" class="navbar-brand">Test2</Link>
  <Link to="/test3" class="navbar-brand">Test3</Link>
 </div>
</header>

进入css我只得到了这个：

header {
  background: rgb(73, 176, 236);
  display: flex;
  align-items: center;
} 

当我尝试将其显示到 phone 时，看起来 links 分为 2 行。

有可能以某种方式使其更小以显示为一行？

手机屏幕：

Answer 1

你可以试试这个来防止你的弹性容器缩小：

header {
  background: rgb(73, 176, 236);
  display: flex;
  align-items: center;
  flex: 1 0 auto
} 

此外，为了获得更好的 UI，您可以针对相对单位，例如 rem。这是代理的基本字体大小（在大多数浏览器上为 16 像素）。

font-size: 1rem;

然后根据视口更改基本字体：

@media only screen and (max-width: 600px) {
  body {
      font-size: 12px;
  }
}

这将允许您进行扩展，因为您用于选择器的所有 rem 单位现在将相应地增加和减少。