的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/

回答

相關問題