链接显示为两行（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 行。

是否可以通过某种方式将其缩小到一行显示？

来自 phone 的屏幕：

Answer 1

您可以试试这个来防止您的 flex 容器收缩：

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

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

font-size: 1rem;

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

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

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

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

Links are display into two rows (React, css)

css

header

nav

navbar

reactjs