CSSフレックスボックス---フレックスラップ：折り返し;特定の行をスタイルする方法は？

私の質問は、ブラウザウィンドウの幅に応じて複数の行に折り返す（flex-wrap：wrap;）というスタイルのフレックスボックスに関連しています：JavaScript以外の方法で特定の行をデザインする方法はありますか？CSSフレックスボックス---フレックスラップ：折り返し;特定の行をスタイルする方法は？

我々持って次のdiv

<body> 
<div class="flexwrap"> 
    <div class=flexbox"></div> 
    <div class=flexbox"></div> 
    <div class=flexbox"></div> 
</div> 
</body>

そして、次のスタイルシートのブラウザウィンドウの幅が900px以上である

.flexwrap { 
    display: -webkit-box; 
    -webkit-box-orient: horizontal; 
    display: -moz-box; 
    -moz-box-orient: horizontal; 
    display: flex; 
    box-orient: horizontal; 
    display: -ms-flexbox; 
    -ms-flex-direction: row; 
    flex-wrap: wrap; 
} 

.flexbox { 
    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
    box-flex: 1; 
    flex-grow:1; 
    flex-shrink:0; 
    width:300px; 
    height:100px; 
}

、1になりますクラス.flexboxを持つすべてのdiv単一の水平線が互いに隣り合っている。ブラウザウィンドウの幅が900ピクセル未満の場合、クラス.flexboxのdivはブラウザの幅を除いて2行または3行になります。

2行目のすべてのdivをスタイルしたいと思っています。つまり、次のことを意味します。

Browser width > 900px = no div is styled 
Browser width < 900px and Browser width > 600px = the third div is styed 
Browser width < 600px = the second div is styled

CSSを使用してこれを達成する方法はありますか？事前に

おかげで

出典

2013-10-29 philkunz

'flex-wrap：wrap'を適用して要素にスタイルを適用すること、またはJavaScriptを使用せずに同様の方法で要素を動作させることを意味しますか？通常、サンプルコードや、達成しようとしていることを示すイメージを提供することで、助けを得ることがより効果的です。 –

ここにも同様の質問があります：http://stackoverflow.com/questions/19574851/how-to-specify-an-element-after-which-to-wrap-in-css-flex/19576595#19576595 – jbenjohnson

関連：http： //stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid – cimmanon

号フレキシボックスは複数行フレックスコンテナ内の特定の行のスタイルを設定する方法を提供していません。

フレックスボックスフレックスアイテムのフレックス単位の値に基づいてフレキシブルアイテムのサイズを変更できます。

http://codepen.io/cimmanon/pen/GKEfD

.flexwrap { 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    -webkit-flex-wrap: wrap; 
    -ms-flex-wrap: wrap; 
    flex-wrap: wrap; 
} 
@supports (flex-wrap: wrap) { 
    .flexwrap { 
    display: flex; 
    } 
} 

.flexbox { 
    -webkit-flex: 1 20em; 
    -ms-flex: 1 20em; 
    flex: 1 20em; 
    height: 100px; 
}

これは2009フレキシボックスの実装では動作しないことに注意してください：ラッピングが指定されている間は、ブラウザが

それを実装していない

何フレックス基礎

出典

2013-10-29 19:00:58 cimmanon

JavaScriptとjqueryを使用しますか？ – philkunz

CSSフレックスボックス---フレックスラップ：折り返し;特定の行をスタイルする方法は？

答えて

関連する問題