防止d性项目左右渲染

添加此样式：

.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 >  <div >    <div ></div>    <p>some text</p>  </div></div>