在伸缩对象中开始一个新行

Question

<Popper id={"simplePopper"} open={this.context.loading}  
style={{display: "flex",
alignItems: "center",
justifyContent: "center",
backgroundColor: 'red',opacity:'0.5',width:'100%',height:'100%'}}>
<i className="fas fa-5x fa-circle-notch fa-spin"></i>
Loading....
<Popper>

本例中，fa-spin icon和loading...在同一行。

所以我试了一些

<i className="fas fa-5x fa-circle-notch fa-spin"></i>
<br/>
Loading....

或

<p>
<i className="fas fa-5x fa-circle-notch fa-spin"></i>
</p>
<p>
Loading....
</p>

或

<div>
<i className="fas fa-5x fa-circle-notch fa-spin"></i>
</div>
<div>
Loading....
</div>

任何方式都不能生成新行。

如何分离icon和Loading...??

---

我用这个代码解决了。

谢谢你的帮助

<div>
<div style={{flexWrap: "wrap", width:"100%"}}>
<i className="fas fa-5x fa-circle-notch fa-spin"></i>
</div>
<div>
<Typography variant="h5" component="h2">
Loading..
{this.context.progress}
</Typography>
</div>
</div>

Answer 1

可以将flex-wrap: wrap;添加到父级，第一个子级必须为width 100%。

如果你只有2个子元素，你也可以设置flex-direction: column。