如何在Flexbox中打破线？

Question

我在Flexbox中有一个图像和文字我希望文字低于图像，但出于某种原因，它们只是保持一致。

.container {
  width: 80%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.sizethis {
  width: 60%;
  margin: 0 40px;
}

.box {
  width: 23%;
  margin: 1%;
  height: 180px;
  border: solid 1px #c4c4c4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

<div class="container">
  <div class="sizethis">
    <div class="box">
      <img src="myimage.png" alt="">
      <p>Item number one</p>
    </div>
  </div>
</div>

Answer 1

尝试添加到您的＆＃39; .box＆＃39;类：

flex-direction: column;
vertical-align: top;

看起来这可以解决您的麻烦。

https://jsfiddle.net/85L0sd9o/

Answer 2

  

我希望文字低于图片，但出于某种原因，他们只是保持一致。

他们只是保持一对一，因为Flex容器具有以下初始设置：

• flex-direction: row〜所有弹性项目必须水平排列
• flex-wrap: nowrap〜所有弹性项目仅限于一行

如果要垂直堆叠项目，可以使用以下两种方法：

1. 将flex-direction: column添加到容器中。这会覆盖row默认值。
＆＃13;
＆＃13;
.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 23%;
  height: 180px;
  border: solid 1px #c4c4c4;
}
＆＃13;
<div class="container">
  <div class="sizethis">
    <div class="box">
      <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
      <p>Item number one</p>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;
1. 将flex-wrap: wrap添加到容器中。这会覆盖nowrap默认值。然后为每个弹性项目提供足够的宽度，以将下一个项目推送到下一行。
＆＃13;
＆＃13;
.box {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 23%;
  height: 180px;
  border: solid 1px #c4c4c4;
}

p {
  flex: 0 0 100%;
}
＆＃13;
<div class="container">
  <div class="sizethis">
    <div class="box">
      <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
      <p>Item number one</p>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;