的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所以他们在彼此之下。如果我设置他们显示：块他们根本不像我期望的正常块元素会采取行动，他们仍然坐在彼此相邻，而不是从上到下。

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

来源

2017-04-21 huan son

首先 - 从不剥离结束标签。您的'flexbox'设置有改进的余地。但是，您可以尝试将它们设置为'inline-block'，宽度为'100％'。 – snkv

@Sqnkov我是新来的，今天学习flexbox。请告诉我要改进什么。 –

@Sqnkov'inline-block'不会改变任何行为 –

有2个选项可以显示flex项目，所以它们在垂直方向彼此“下”。

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

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

来源

2017-04-21 10:43:58 ceindeg

使元件阻挡，如果父母是柔性盒

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

回答

使元件阻挡，如果父母是柔性盒

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

回答

相关问题