我正在使用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>
添加此样式:
.inner { flex-direction: column; }
这告诉flexbox在行而不是列中显示其子级。(我知道,很奇怪,对吧?)
更新的代码段:
.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>