css - 在 flex 对象中开始一个新行

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>

标签： cssmaterial-ui

Answer 1

您可以添加到父级flex-wrap: wrap;，第一个子级的宽度必须为 100%。

或者您可以设置flex-direction: column是否只有 2 个子元素。