React JS：使用 `flexbox` 实现一个 div 覆盖另一个答案

【问题标题】：React JS : using `flexbox` to implement one div over anotherReact JS：使用 `flexbox` 实现一个 div 覆盖另一个
【发布时间】：2017-11-05 13:45:57
【问题描述】：

React JS，仅使用 flexbox 布局实现一个 div。

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

【问题讨论】：

这和 react 一点关系都没有，真的。
SO 不在这里编写代码，所以请发表您自己的努力，我们会看看如何提供帮助
Flexbox 不是为重叠而设计的。但 CSS Grid 是。 stackoverflow.com/q/43919067/3597276

标签： css reactjs flexbox

【解决方案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

【讨论】：

对不起，我不太明白你的意思，你的意思是像这样重叠邻居元素吗？ <div style="display: flex;"><div class="grey"></div><div class="red"></div></div>
就我而言，除非您使用calc() 的技巧，否则没有办法做到这一点，编辑了我的答案

【解决方案2】：

尝试align-self: center; 和margin: 0 auto; 将框设置在中心。

【讨论】：