reactjs - CSS 中的 flex 定位

Question

我正在创建一个 React Native 应用程序，我想使用 flex 来构建我的元素在屏幕上的定位。考虑到我们有以下屏幕:红色区域的 flex-grow 值为 1，黄色区域为 2，绿色区域为 3。它们都有一个带有 display: flex 的父级 和 flex-grow: 1。 (这是 React Native，所以默认的 flex-direction 是列)。

我的问题是:没有绿区怎么办？我怎么能告诉 flex 将父级的 1/6 用于红色区域，2/6 用于黄色区域并将其余部分留空？

Answer 1

我能够通过将 flex-grow: 0 和 flex-shrink: 0 应用于 flex 元素来实现您描述的布局。通过将 flex-basis 设置为适当的百分比，无论是否存在第三个 div，布局都会保持不变。

.wrapper {
  display: flex;
  flex-flow: column nowrap;
  height: 100vh;
}
.one {
  flex: 0 0 16.666%; /* dont grow, dont shrink, starting basis */
  background: red;
}
.two {
  flex: 0 0 33.333%; /* dont grow, dont shrink, starting basis */
  background: yellow;
}
.three {
  flex: 0 0 50%; /* dont grow, dont shrink, starting basis */
  background: green;
}

<div class="wrapper">
  <div class="one">ONE</div>
  <div class="two">TWO</div>
  <div class="three">THREE</div>
</div>

这次我省略了第三个 div，我们得到了相同的布局:

.wrapper {
  display: flex;
  flex-flow: column nowrap;
  height: 100vh;
}
.one {
  flex: 0 0 16.666%; /* dont grow, dont shrink, starting basis */
  background: red;
}
.two {
  flex: 0 0 33.333%; /* dont grow, dont shrink, starting basis */
  background: yellow;
}
.three {
  flex: 0 0 50%; /* dont grow, dont shrink, starting basis */
  background: green;
}

<div class="wrapper">
  <div class="one">ONE</div>
  <div class="two">TWO</div>
</div>