フレックスボックス - 2つのセットでアイテムをラップする

Question

フレックスボックスに精通している人には、簡単な質問があります。

私は4つのフレックスアイテムの行を持っています。私は最初のブレークポイント（max-width:1024px）でそれを2列に2つにまとめることを考えています。フレックスコンテナ内の各項目の幅に％値を使用してこれを実現できるかもしれないと思っていましたが、うまくいくようです。

コード

はここにある：私は考えている

http://codepen.io/reskk/pen/rrpdVm

私は2 <div>秒以内の時間でフレックスアイテム2をラップすることによって、これを達成できます。しかし、これは単にレイアウトと関連し、ページを対称にするもっと多くの作業を作成します。

私は幅のパーセンテージなどを使用してこれを行う方法はありますか？例えば

：
25％のベースライン幅 - 行当たり2
100 769px @％幅 - - 1024px @行当たり4
50％の幅、行あたり1

おかげで、

のRik

Answer 1

これを達成するには、フレックスコンテナをラップし、フレックスアイテムが（明らかに）伸びたり収縮しないようにするために、フレックスグロース&を子供に0％に縮小する必要がありますそれらのコンテンツは所望の空間に収まらない（すなわち、 25％）。次に、ブレークポイントごとにフレックスベースを通常に設定できます。

はあなたの例に基づいて、ここにあなたが何ができるかです：私はあなたのペンhereを更新しました

.whatflex { 
    display: flex; 
    flex-wrap: wrap; 
} 

.con { 
    flex-grow: 0; 
    flex-shrink: 0; 
    flex-basis: 100%; 
} 

@media only screen and (min-width: 769px){ 
    .con{ flex-basis: 50%; } 
} 

@media only screen and (min-width: 1024px){ 
    .con{ flex-basis: 25%; } 
} 

。