CSS中的Flex定位

Question

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

我的问题是：如果没有绿色区域怎么办？我怎么能告诉flex将父级的1/6用作红色区域，将2/6的用作黄色区域，其余的留为空白？

Answer 1

通过将flex-grow: 0和flex-shrink: 0应用于弹性项目，我能够实现您所描述的布局。通过将flex-basis设置为适当的百分比，布局可以在存在或不存在第三格的情况下保持不变。

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

Answer 2

Théo，您只想使用flex还是可以听到其他建议？

这是使用grid的完美示例。

提琴：https://jsfiddle.net/h17tezLd/

<div class="container">
    <div class="zone1"></div>
    <div class="zone2"></div>
    <div class="zone3"></div>
</div>

<style>
    .container {
        width: 150px;
        height: 300px;
        background: grey;
        display: grid;
        grid-template: 1fr 2fr 3fr / 100%;
        }
    .zone1 { background: red; }
    .zone2 { background: blue; }
    .zone3 { background: green; }
</style>