我正在使用 flexbox 将 block 中的一些元素居中,但我希望内部的每个元素都在其自己的行中。例如,我希望橙色方 block 位于文本上方,但在使用 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>
最佳答案
添加此样式:
.inner {
flex-direction: column;
}
这告诉 flexbox 在行而不是列中显示它的 child 。 (我知道,很奇怪,对吧?)
更新的代码段:
.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;
flex-direction: column;
}
.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>
关于html - 防止 flex 元素从一边到另一边渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42723596/