css - 将元素 x% 与 flexbox 一起定位？

Question

我想定位一个元素，以便在可用空间中，1/3 在它上面，2/3 在下面。这是一个 React Native 项目，所以我可以使用 flexbox，但不能使用网格或浮动。

这段代码有效，但必须有空元素不是很干净，div.first没有div.last它们可以完成吗？

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.one {
  background: gold
}

.first {
  flex: 1;
}

.last {
  flex: 2
}

<div class="first"></div>
<div class="one">One</div>
<div class="last"></div>

https://codepen.io/adsfdsfhdsafkhdsafjkdhafskjds/pen/PoPjdad

标签： cssflexbox

Answer 1

像这样使用保证金怎么样？

编辑：只需添加overflow-y:hidden;到正文

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y:hidden;
}

.one {
  background: gold;
    margin:33vh 0 66vh 0;
}

<div class="one">One</div>