我不知道爲什麼Flexbox項目拉伸

Question

我使用flexbox，但我不知道項目拉伸。 我想獲得這樣的結果：

內容項目是合理的，當內容的空白結束他們包裹。就像這樣：

項目是DIV包含標籤和輸入元素。所以我希望整個潛水包裝和標籤不會被輸入分開。

這裏的HTML：

<tr class="form_boxes"> 
    <td colspan="3"> 
     <div class=""> 
      <span class="">NPA</span> 
      <input type="text" ng-model="np.npa" maxlength="5" class="char_5" /> 
     </div> 
     <div class=""> 
      <span>NXX</span> 
      <input type="text" ng-model="np.nxx" /> 
     </div> 
     <div class=""> 
      <span>ISO</span> 
      <input type="text" ng-model="np.iso" maxlength="5" class="char_5" /> 
     </div> 
     <div class=""> 
      <span>Descrizione</span> 
      <input type="text" ng-model="np.descrizione" /> 
     </div> 
     <div class=""> 
      <span>Location</span> 
      <input type="text" ng-model="np.location" /> 
     </div> 
     <div class=""> 
      <span>Root</span> 
      <input type="text" ng-model="np.root" /> 
     </div> 
     <div class=""> 
      <span>Billing ID</span> 
      <input type="text" ng-model="np.billingId" /> 
     </div> 
     <div class=""> 
      <span class="no-wrap">Ultimo aggiornamento: {{ np.ultimoUpdate }}</span> 
     </div> 
    </td> 
</tr> 

，這裏的CSS：

#internal_content .form_boxes { 
    width:500px; 
    display: flex; 
    flex-direction: row; 
    flex-wrap: nowrap; 
    justify-content: space-between; 
    align-items: baseline; 
    align-content: flex-start; 

    } 

#internal_content .form_boxes td { 
    width: 100%; 
} 

我也想去掉TR的固定大小... 這是結果，我獲得：

正如你所看到的，TR大小沒關係......和TD的大小如此（請相信我）。問題是DIV也伸展，但我不知道爲什麼！

任何人都可以幫助我達到我的目的嗎？

UPDATE

有了您的解決方案，現在我得到這樣的：

而且最後一行是有道理的......應該是這樣我張貼，而不是第一個圖像..我必須創建一個新的父級柔性盒嗎？

Answer 1

您使用了div的父母你的Flexbox，就使TD，你的類應該是TD元素上這樣的div受到影響

#internal_content .form_boxes td { 
    width:500px; 
    display: flex; 
    flex-direction: row; 
    flex-wrap: nowrap; 
    justify-content: space-between; 
    align-items: baseline; 
    align-content: flex-start; 
} 

，並刪除應該這樣做

寬度

此外divs伸展，因爲它們是塊元素和塊元素默認情況下始終具有全寬，除非您另行聲明

並且這也是問題解決方案的一部分

Flex-box: Align last row to grid