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以行而不是列显示其子项。（我知道，很奇怪，对吧？）

更新了摘录：

＆＃13;

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

＆＃13;

<div class="container">
  <div class="inner">
    <div class="square"></div>

    <p>some text</p>
  </div>
</div>

＆＃13;

Answer 2

Flex容器的初始设置为flex-direction: row。这意味着，无论何时提供元素display: flex或display: inline-flex，默认情况下，该元素的所有子都会水平排列。*

您可以使用flex-direction: column覆盖此默认值：

.container {
  height: 200px;
  width: 200px;
  background: cornflowerblue;
  position: relative;
}

.inner {
  height: 100%;
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column; /* NEW */
}

.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>

或者，您可以通过向容器添加flex-direction: row并为子项提供足够宽的宽度（例如flex-wrap: wrap）来强制width: 100%，以强制每行只有一个项目。

.container {
  height: 200px;
  width: 200px;
  background: cornflowerblue;
  position: relative;
}

.inner {
  height: 100%;
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;             /* NEW */
  align-content: center;       /* NEW */
}

.square {
  width: 30px;
  height: 30px;
  background: tomato;
  display: block;
}

/* NEW */
p {
  flex: 0 0 100%;            
  text-align: center;
}

<div class="container">
  <div class="inner">
    <div class="square"></div>
    <p>some text</p>
  </div>
</div>

^{*请注意“儿童”一词。孩子们以后的后代不参与弹性布局。}

Answer 3

我看到这个问题来自：Vertically aligning two flex items 哪个被标记为重复但实际上并非如此。

BTW给出2个元素的不同垂直位置设置这些属性：

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

容器内只有2个元素，它将显示第一个位于顶部，第二个位于底部。因此，为了使其中一个垂直居中，需要在容器中添加一个空元素，这样容器内就有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>

防止弹性项目从一侧到另一侧呈现

3 个答案: