防止弹性项目左右渲染

Question

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

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

Answer 2

我看到这个问题来自：垂直对齐两个 被标记为重复但实际上不是的弹性项目。

BTW赋予2个元素不同的垂直位置，请设置以下属性：

.container {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: space-between;

}

容器内部只有2个元素，它将在顶部显示第一个元素，在底部显示第二个元素。因此，为了使其中1个垂直居中，需要向容器中添加一个空的伪元素，这样容器内就有3个元素。

.container:before {

  content: "";

}

html, body {

  height: 100%;

  margin: 0;

}

.container {

  width: 500px;

  margin: 0 auto;

  border: 5px solid orange;

  height: 100%;

  

  /* Flex properties */

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: space-between;

}

.container:before {

  content: "";

}

.item-one {

  border: 5px solid yellow;

}

.item-two {

  border: 5px solid red;

}

<div class="container">

  <div class="item-one">Item One</div>

  <div class="item-two">Item Two</div>

</div>