css - react JS : using `flexbox` to implement one div over another

Question

React JS，仅使用 flexbox 布局在另一个之上实现一个 div。

• 是否可以在不使用position:'absolute'，仅使用flexbox布局的情况下实现下图中的布局。
• 或者 React JS 中有更优雅的解决方案？

Answer 1

除了calc()

，我想不出其他方法了

<div style="display: flex; height: 200px; align-items: center;">
    <div style="flex: 0 0 100%; height: 100%; background-color: grey;"></div>
    <div style="width: 30%; height: 60%; margin-left: calc(-50% - (30% / 2)); background-color: red;"></div>
</div>

calc() 的支持 http://caniuse.com/#feat=calc现在挺好的

注意 margin-left 中的 30% 是覆盖元素的宽度，如果元素的宽度假设为 30px，请更改 margin-left 中的 30%到 30px