如何让Flex在我的React应用程序中工作？

Question

基本上，我有两个div设置，我试图使用flex box轻松调整它们的大小，因此它们都使用react在垂直方向上占据了一半的屏幕。由于某种原因，他们看起来像这样。

我尝试重新安装npm，但是那根本没有用，我很确定我的语法还不错。

这是我的App.css

import { AppState } from 'react-native';

componentDidMount() {
  AppState.addEventListener('change', this._handleAppStateChange);
}

_handleAppStateChange = (nextAppState) => {
  if (nextAppState === 'active') { // App has come to the foreground
    if(this.state.currentBusiness.ID != (ID received in deep link)) // Need to get data
         this.getBusiness(ID received in deep link);
  }
 };

这是我的App.js

.wrapper,html,body {
  height: 100%;
  margin: 0;
}
.wrapper {
    display: flex;
    flex-direction: column;

  }

  .nav {
    background-color: red;
    flex: 1;

  }

  .main {
    background-color: blue;
    flex: 1;

  }

Answer 1

如果您删除flex-direction: column;，它们应该可以工作-您实际上想要flex-direction: row;，这是默认设置。

Answer 2

您的代码很好，只需将 flex：1添加到包装类即可。 您可以在此处阅读有关flex的更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.wrapper,
html,
body {
	height: 100%;
	margin: 0;
     


}
  
.wrapper {
	display: flex;
	flex-direction: column;
    flex: 1;
}

.nav {
	background-color: red;
	flex: 1;
}

.main {
	background-color: blue;
	flex: 1;
}

<div class='wrapper'>

    <div class='nav'>
        <text>hey</text>
    </div>

    <div class='main'>
        <text>hey</text>
    </div>
</div>

Answer 3

您缺少flex: 1 CSS定义内的.wrapper道具。定义应如下所示：

.wrapper {
  display: flex;
  flex:1;
  flex-direction: column;
}

使用flex: 1告诉包装器使用所有可用空间。否则，无论高度如何，它都会使用所需的东西。

这是整个CSS：

.wrapper,
html,
body {
  height: 100%;
  margin: 0;
}
.wrapper {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.nav {
  background-color: red;
  flex: 1;
}

.main {
  background-color: blue;
  flex: 1;
}

查看结果：

无论如何，我完全建议使用flexbox based by default的Bootstrap v4。