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

Question

我基本上是在尝试复制带有个人资料链接的推特个人资料导航栏：["Posts", "Posts & replies", "Media", "Likes"]。

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

我的限制：

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

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

下面是一个例子：

​

​

目前，我的链接并不是平均分开的，我也不太确定如何复制Twitters的个人资料导航风格。

​

​

我测试过Material-UIs bottomNavBar风格，它不能复制Twitter。mui bottom nav bar

梅导航栏间距不均：

​

​

任何帮助都将不胜感激！

Answer 1

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

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

正如您所看到的，现在链接、容器和边完美地居中并分开了！

​

​