Html 柔性方向：反向列隐藏导航组件

问题：

组件在我使用
弹性方向：列反转时消失

但是，当我使用
flex-direction:column
时，组件将在屏幕顶部呈现，并且可见

我的目标是将我的
组件呈现为底部导航栏，类似于iPhone应用程序

这是我的密码：


(
)}
/>

这是我的css：

.app{
-ms溢出样式：无；
滚动条宽度：无；
背景颜色：var（--主背景）；
字体系列：“罂粟花”；
最大宽度：100vw；
最小宽度：100vh；
显示器：flex；
弯曲方向：柱反向；
}
灵活方向：列反转不仅反转列的顺序，而且反转位置。例如，如果align items和justify content都设置为flex start（初始值），并且您的flex items的组合高度至少没有flexbox容器那么大，那么它们都将移动到左下角，而不是像您预期的那样停留在左上角。你可以像下面这样解决这个问题

.app {
  -ms-overflow-style: none;
  scrollbar-width: none;
  background-color: var(--main-background);
  font-family: "Poppins";
  max-width: 100vw;
  min-width: 100vh;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  justify-content: flex-end;
}

或者，您可以只保留flex-direction:column，并将按住导航键的div向下移动到route\uu包装器下方

我不是在这里推销自己，但我制作了一个网络应用程序，可能会帮助你理解Flexbox。链接：

此外，我不确定这是否能在不查看所有代码的情况下完全帮助您。
Flex direction:column reverse不仅可以反转列的顺序，还可以反转列的位置。例如，如果align items和justify content都设置为flex start（初始值），并且您的flex items的组合高度至少没有flexbox容器那么大，那么它们都将移动到左下角，而不是像您预期的那样停留在左上角。你可以像下面这样解决这个问题

.app {
  -ms-overflow-style: none;
  scrollbar-width: none;
  background-color: var(--main-background);
  font-family: "Poppins";
  max-width: 100vw;
  min-width: 100vh;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  justify-content: flex-end;
}

或者，您可以只保留flex-direction:column，并将按住导航键的div向下移动到route\uu包装器下方

我不是在这里推销自己，但我制作了一个网络应用程序，可能会帮助你理解Flexbox。链接：

此外，我不确定这是否能在不查看所有代码的情况下完全帮助您。
这太棒了，David！喜欢网络应用这太棒了，大卫！喜欢这个网络应用