css - 如何使用均匀分隔的链接和父容器制作动态导航栏 (React/CSS)

Question

我基本上是在尝试使用个人资料链接复制 Twitter 个人资料导航栏：["Posts", "Posts & replies", "Media", "Likes"].

我当前的问题代码：https ://codesandbox.io/s/thirsty-blackwell-mjjpg?file=/src/App.js

我的约束：

1.) 在视口宽度大小更改期间，导航栏链接文本在左侧和右侧的距离必须始终相等。

2.) 导航栏必须在其容器中居中，其链接必须在其容器中居中，而最左侧和最右侧都必须与容器边缘保持均匀距离，以便左侧和右侧距离边缘容器的距离与每个链接分开的距离相同。

这是一个例子：

目前，我的链接没有被平等地分开，而且我不确定如何复制 Twitter 的个人资料导航样式。

我已经测试了 Material-UIs bottomNavBar 样式，但它并没有复制 Twitter。mui底部导航栏

MUI 导航栏不等间距：

任何帮助，将不胜感激！

标签： cssreactjs

Answer 1

我终于弄明白了，这很简单。我没有使用 CSS flex 来布局我的链接，而是使用了 CSS 网格。不知何故，网格自然允许元素执行此行为而无需额外的 css。有趣的是，我注意到 Twitter 使用了 flex，但结果如下：

固定代码：https ://codesandbox.io/s/thirsty-blackwell-mjjpg?file=/src/App.js

如您所见，现在链接、容器和边完美地居中并分开！