我正在使用flexbox将一些项目放在一个块中,但我希望每个项目都在它自己的行中.例如,我希望橙色方块位于文本上方,但是在使用flex之后它将它移动到文本的一侧 - 有没有人知道这方面的方法呢？
.container {
height: 200px;
width: 200px;
background: cornflowerblue;
position: relative;
}
.inner {
height: 100%;
position: absolute;
left: 0;
width: 100%;
top: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.square {
width: 30px;
height: 30px;
background: tomato;
display: block;
}<div class="container">
<div class="inner">
<div class="square"></div>
<p>some text</p>
</div>
</div>