如何用flex顯示每行最大div值？

我有一個對話框，將顯示我的網站的訂單，以及每個的內容。每個訂單都有自己的盒子。我遇到問題，格式化的div顯示連續的最大盒子數量。如何用flex顯示每行最大div值？

這個jsfiddle顯示了這個問題。正如你所看到的，這些盒子被擠壓成一排，每個盒子裏的行都會分裂成一條新的線條，這是我不想要的。

我在CSS和對話框代碼中設置了寬度，但我真正想要的是打開到主頁面的全寬或90％的對話框。

有人請指出我的錯誤嗎？

<style> 
    .test-container { 
     display: -webkit-flex; 
     display: flex; 
     -webkit-reorder-direction: row-reverse; 
     reorder-direction: row-reverse; 
     width: 600px; 
     height: auto; 
     background-color: lightgrey; 
    } 
    .test-item { 
     background-color: cornflowerblue; 
     width: 33%; 
     margin: 10px;  
    } 
    </style> 

    $(document).ready(function() { 
     $("div").dialog({ 
      modal: true, 
      title: "My Dialog", 
      minHeight: 100, 
      minWidth: 200, 
      maxWidth: 500, 
      maxHeight: 250, 
     }); 
    }); 

    <div class="test-container"> 
     <div class="test-item">Ordered On: 11/19/2014 
     <div><input name="qty_0" value="1" type="hidden">&nbsp; 
     <input name="attr_0" type="hidden">&nbsp; 
     <input name="pid_0" value="788" id="ck_0" type="checkbox">&nbsp;<label for="ck_0">aaa_Credit Card</label> 
     </div> 
     </div> 
     <div class="test-item">Ordered On: 10/27/2014 
     <div><input name="qty_1" value="1" type="hidden">&nbsp; 
     <input name="attr_1" type="hidden">&nbsp; 
     <input name="pid_1" value="788" id="ck_1" type="checkbox">&nbsp;<label for="ck_1">aaa_Credit Card</label> 
     </div> 
     <div><input name="qty_1" value="1" type="hidden">&nbsp; 
     <input name="attr_1" type="hidden">&nbsp; 
     <input name="pid_1" value="788" id="ck_1" type="checkbox">&nbsp;<label for="ck_1">aaa_Credit Card</label> 
     </div> 
     </div> 

     <div class="test-item">Ordered On: 11/27/2014 
     <div><input name="qty_1" value="1" type="hidden">&nbsp; 
     <input name="attr_1" type="hidden">&nbsp; 
     <input name="pid_1" value="788" id="ck_1" type="checkbox">&nbsp;<label for="ck_1">aaa_Credit Card</label> 
     </div> 
     <div><input name="qty_1" value="1" type="hidden">&nbsp; 
     <input name="attr_1" type="hidden">&nbsp; 
     <input name="pid_1" value="788" id="ck_1" type="checkbox">&nbsp;<label for="ck_1">aaa_Credit Card</label> 
     </div> 
     <div><input name="qty_1" value="1" type="hidden">&nbsp; 
     <input name="attr_1" type="hidden">&nbsp; 
     <input name="pid_1" value="788" id="ck_1" type="checkbox">&nbsp;<label for="ck_1">aaa_Credit Card</label> 
     </div> 
     </div>  

     <div class="test-item">Ordered On: 08/27/2015 
     <div><input name="qty_1" value="1" type="hidden">&nbsp; 
     <input name="attr_1" type="hidden">&nbsp; 
     <input name="pid_1" value="788" id="ck_1" type="checkbox">&nbsp;<label for="ck_1">aaa_Credit Card</label> 
     </div> 
     <div><input name="qty_1" value="1" type="hidden">&nbsp; 
     <input name="attr_1" type="hidden">&nbsp; 
     <input name="pid_1" value="788" id="ck_1" type="checkbox">&nbsp;<label for="ck_1">aaa_Credit Card</label> 
     </div> 
     </div> 
    </div>

來源

2017-05-08 user3052443

flex項目上的初始設置爲flex-shrink: 1。這意味着Flex項目會縮小以避免容器溢出。這就是爲什麼你的包裝線的文字。要查看我在說什麼，請將flex-shrink: 0添加到您的.test-item元素中。 revised demo 1

您可能正在尋找的是讓容器中的空間均勻分佈在各個項目中。考慮釋放容器的寬度限制。 revised demo 2，revised demo 3

來源

2017-05-08 02:40:21

謝謝。這有很大的不同。我按照你提到的做了改變，然後意識到在實際使用中線條不會是相同的寬度。我將其更改爲https://jsfiddle.net/thuzm1ny/6/。有沒有辦法對齊這些框或將涉及定義寬度？如果我能夠讓它看起來更有序，它會給人留下更好的印象，我想。 – user3052443

這就是flexbox的工作原理。除非您定義寬度，否則這些項目將根據其內容進行尺寸調整。您可以切換到CSS網格佈局來解決您的問題：https://jsfiddle.net/thuzm1ny/7/ –

這就是我所設想的，但想確定。我會玩你的兩個例子。我感謝你發佈他們。 – user3052443

如何用flex顯示每行最大div值？

回答

相關問題