可變寬度瓷磚的Flexbox順序

文章瓷磚可以適合4連續。

視頻可以連續放入2個。

我遇到的問題是：與文章，文章，文章，視頻一行。視頻碰到下一行。

或文章，視頻，視頻。第二個視頻再次碰到下一行。

設置順序屬性似乎很痛苦，因爲文章/視頻的顯示順序完全是隨機的。用flexbox處理這個問題有什麼好方法嗎？

這裏的小提琴 - https://jsfiddle.net/nx4ap9u4/（在這種情況下，我想有第一排2個藍色塊和綠色塊，第二排的4個藍色塊沒有我不得不用CSS或者JS設置的順序）

.blog-feeder { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    justify-content: flex-start; 
 
} 
 

 
.article-preview.grid { 
 
    flex-grow: 1; 
 
    flex-basis: 25%; 
 
    width: auto; 
 
    margin-right: 15px; 
 
    background: blue; 
 
    height: 300px; 
 
} 
 

 
.article-preview.grid.post_VIDEO { 
 
    flex-basis: 50%; 
 
    background: green; 
 
}

<div class="blog-feeder"> 
 
    <div class="article-preview grid"></div> 
 
    <div class="article-preview grid"></div> 
 
    <div class="article-preview grid"></div> 
 
    <div class="article-preview grid post_VIDEO"></div> 
 
    <div class="article-preview grid"></div> 
 
    <div class="article-preview grid"></div> 
 
    <div class="article-preview grid"></div> 
 
</div>

來源

2017-06-01 Tom

我會嘗試清理我的代碼爲張貼。我應該澄清，對於重新排列文章/視頻，我很好，所以它們很好地適合網格。如果可能的話，我只想讓CSS處理重新排序而不是用jQuery來完成。 – Tom

這種類型的佈局算法是超出了Flexbox的能力。 Flex容器中的項目不能自動重新排序以填充行。

但是，此功能在另一個CSS3技術中可用，網格佈局。

grid-auto-flow屬性的「密集」包裝算法使網格項自動重新排序以填充行中的空白空間。

從規格：

未明確由自動放置算法置於被自動放入未佔用空間網格容器
7.7. Automatic Placement: the grid-auto-flow property

電網項目。

grid-auto-flow控制自動佈局算法的工作原理，確切指定自動放置的項目如何流入網格。

dense

如果指定，自動佈局算法採用的是「密集」包裝算法，它試圖填補早前在網孔，如果較小的項目上來以後。這可能會導致項目無序出現，這樣做會填充較大項目留下的孔。

.blog-feeder { 
 
    display: grid; 
 
    grid-template-columns: repeat(4, 1fr); 
 
    grid-auto-rows: 100px; 
 
    grid-auto-flow: dense; 
 
    grid-gap: 10px; 
 
    padding: 10px; 
 
} 
 

 
.article-preview.grid { 
 
    grid-column-end: span 1; 
 
    background: blue; 
 
} 
 

 
.article-preview.grid.post_VIDEO { 
 
    grid-column-end: span 2; 
 
    background: green; 
 
}

<div class="blog-feeder"> 
 
    <div class="article-preview grid"></div> 
 
    <div class="article-preview grid"></div> 
 
    <div class="article-preview grid post_VIDEO"></div> 
 
    <div class="article-preview grid"></div> 
 
    <div class="article-preview grid"></div> 
 
    <div class="article-preview grid"></div> 
 
    <div class="article-preview grid post_VIDEO"></div> 
 
    <div class="article-preview grid"></div> 
 
    <div class="article-preview grid"></div> 
 
    <div class="article-preview grid"></div> 
 
    <div class="article-preview grid"></div> 
 
    <div class="article-preview grid post_VIDEO"></div> 
 
    <div class="article-preview grid"></div> 
 
</div>

revised demo

下面是它如何工作的：

的.blog-feeder元素成爲與display: grid網格容器。
grid-template-columns屬性將網格設置爲四列，每列寬度爲1fr，這是可用空間的平均分配。（它類似於flexbox中的flex-grow: 1。）
沒有指定顯式行。但是網格自動創建的任何行（即，隱含的行）將具有100px的高度。（原始代碼中以前300px高的Flex項目，僅用於演示目的）
grid-auto-flow屬性設置佈局算法。如有必要，dense將從源訂單中取出項目以填補空白。
grid-gap屬性設置項目（排水溝）之間的空間。此屬性僅適用於項目之間;它對物品和容器之間的空間沒有影響。

到目前爲止，所有命令都設置在容器級別。這與flexbox不同，flexbox中必須設置許多類似的命令。

在網格項目本身，在grid-column-end屬性span值是告訴每個項目多少列覆蓋。

瀏覽器支持CSS電網

鉻 - 全力支持2017年3月8日（版本57）
Firefox瀏覽器 - 全面支持，2017年3月6日（中版本52）
Safari - 截至2017年3月26日的全面支持（版本10.1）
Edge - 截至2016年10月16日的全面支持， 2017（版本16）
IE11 - 不支持當前規範;支持過時版本

下面是完整的畫面：http://caniuse.com/#search=grid

來源

2017-06-01 03:55:37

可變寬度瓷磚的Flexbox順序

回答

相關問題