【问题标题】：make elements block if parents are flex boxes如果父母是弹性盒子，则使元素阻塞
【发布时间】：2017-04-21 21:27:10
【问题描述】：

JSFIDDLE：https://jsfiddle.net/bnfsnm40/

标记：

<div class="card">
  <div class="card-header">Download stats</div>
  <div class="card-block">
      <div class="statistics">
          <span class="day statistic">
              <div class="count">100</div>
              <div class="rank">10th</div>
              <div class="icon text-success">
                  <i class="fa fa-line-chart "></i>
                  +4
              </div>
           </span>

我想做什么：

count、rank 和icon应该是display: block，所以它们在彼此之下。如果我将它们设置为 display: block 他们根本不会像我期望的普通块元素那样行动，他们仍然彼此相邻而不是从上到下。

.card-block {
  .statistics {
    display: flex;
    justify-content: space-around;
   .statistic {
      height: 65px;
      display: flex;
      .count {
        display: block;
        width: 100%;
      }
      .rank {
        display: block;
        width: 100%;
      }

【问题讨论】：

首先 - 永远不要从你的例子中去掉结束标签。您的flexbox 设置还有改进的余地。但是，您可以尝试将它们设置为inline-block，宽度为100%。
@Sqnkov 我是新手，今天正在学习 flexbox。请告诉我要改进的地方。
@Sqnkov inline-block不会改变任何行为
首先添加代码的完整片段。一直到结束标签。现在任何愿意提供帮助的人都必须输入所有缺失的字符。
@Sqnkov 这是我代码的完整片段

标签： html css twitter-bootstrap flexbox

【解决方案1】：

有 2 个选项用于 flex 显示项目，因此它们垂直“在”彼此“下方”。

选项 1 - 在父容器上设置 flex-wrap:wrap;，在子容器上设置 width:100%;。

选项2 - 在父容器上设置flex-direction:column;。

【讨论】：