フレックスで行ごとに最大のdivを表示する方法は？

Question

私は、自分のサイトの注文とそれぞれの内容を表示するダイアログを持っています。各注文には独自のボックスがあります。私はdivの行を最大ボックス数を表示するようにフォーマットを取得する問題を抱えています。

このjsfiddleに問題があります。ご覧のように、ボックスは1つの行に絞り込まれ、各ボックスの行は新しい行に分割されますが、これは嫌です。

私は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> 

Answer 1

フレックスアイテムの初期設定はflex-shrink: 1です。これは、フレックスアイテムがコンテナのオーバーフローを避けるために縮小することを意味します。そういうわけで、ラッピングのテキスト行です。私が話していることを確認するには、.test-item要素にflex-shrink: 0を追加してください。 revised demo 1

あなたが探しているのは、コンテナ内のスペースをアイテム間で均等に分散させることです。コンテナの幅制限を解除することも検討してください。 revised demo 2,revised demo 3