Question

您好我正在努力了解Flexbox，尽管检查了很多网站/文档。我试图在屏幕的LHS上有一个垂直导航栏（根据http://slackclone.herokuapp.com/ - 需要登录），我在屏幕的RHS上添加另一个垂直导航栏。左边.nav目前有

.nav {
  margin: 0;
  color: white;
  background: #337ab7;
  width: 21rem;
-ms-flex: 0 1rem;
-webkit-box-flex:  0;
-moz-box-flex:  0;
-ms-box-flex:  0;
box-flex:  0;
display: flex;
justify-content: flex-start;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}

但是，我正在尝试将右侧导航栏设置为：

 .right-nav {
  margin: 0;
  color: white;
  background: #337ab7;
  width: 25rem;
-ms-flex: 0 1rem;
-webkit-box-flex:  0;
-moz-box-flex:  0;
-ms-box-flex:  0;
box-flex:  0;
display: flex;
justify-content: flex-start;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}

然而，

-webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;

来自.nav的

覆盖了我的.right-nav

中的行方向

注意：我需要将flex方向作为右导航的行，因为我试图放入一个水平排列的制表符组件。 .nav中的当前列方向使得标签组件堆栈垂直变得非常令人沮丧。所以我的问题是如何在页面上有两个使用列和另一行的导航栏。或者有更好的方法来解决这个问题与我的选项卡。感谢

flexbox for react app，column vs row

0 个答案: