时间戳

首页 > 解决方案 > Flex-direction：反向列隐藏导航组件

html - Flex-direction：反向列隐藏导航组件

问题描述

问题： 使用时<Navigation/>组件消失flex-direction: column-reverse

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

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

这是我的代码：

<div className="app">
      <Router>
        <div className="navigation__wrapper">
          <Navigation />
        </div>
        <div className="route__wrapper">
          <AppWrapper>
            <Switch>
              <Route
                exact
                path="/"
                render={() => (
                  <MainLayout>
                    <Homepage />
                  </MainLayout>
                )}
              />

            
            </Switch>
          </AppWrapper>
        </div>
      </Router>
    </div>

这是我的CSS：

.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;
}

标签： htmlcssreactjs

解决方案

Flex-direction：column-reverse 不仅会反转列的顺序，还会反转排列。例如，如果 align-items 和 justify-content 都设置为 flex-start（它们的初始值也是如此）并且您的 flex 项目的组合高度没有至少与 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: 列并将按住导航的 div 向下移动到 route__wrapper 下方。

不是在这里推销自己，而是我制作了一个 Web 应用程序，可以帮助您理解 Flexbox。链接：https ://csspressme.web.app/playbox/flexbox

另外，我不确定这是否会完全帮助您而无需查看您的所有代码。

推荐阅读