防止弹性项目左右渲染

小编典典

防止弹性项目左右渲染

html

我正在使用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>

阅读 239

2020-05-10

共1个答案

小编典典

添加此样式：

.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>

2020-05-10