CSS Flex Box --- flex-wrap：wrap;如何設計特定線路？

我的問題涉及到根據瀏覽器窗口的寬度將（flex-wrap：wrap;）包裝成多行的樣式化Flex-Box：除了JavaScript之外，有什麼方法可以設計特定的行嗎？CSS Flex Box --- flex-wrap：wrap;如何設計特定線路？

我們有以下的div

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

而下面的樣式表

.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; 
}

當瀏覽器窗口的寬度大於900px，與類.flexbox所有div會在一個單個水平線彼此相鄰。當瀏覽器窗口的寬度小於900px時，帶有.flexbox類的div將進入2或3行，並在瀏覽器寬度上進行摺疊。

我想樣式所有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： //sackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid – cimmanon

號Flexbox將不提供一種方法，風格多彎曲線集裝箱專用線。

Flexbox 確實允許彈性項目根據其彈性基礎值進行調整。

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年Flexbox的執行工作：

雖然規定包裝時，沒有瀏覽器實現了它
有沒有彎曲，基礎

來源

2013-10-29 19:00:58 cimmanon

所以你會使用JavaScript和jQuery？ – philkunz

CSS Flex Box --- flex-wrap：wrap;如何設計特定線路？

回答

相關問題