如何指定一個元素，然後在css flexbox中包裝？

我不認爲這是Flexbox標準的一部分，但是在某個元素之後建議或強制包裝可能有一個竅門嗎？我想回應不同的頁面大小，並且不加標記地以不同的方式包裝一個列表，所以我不會在下一行顯示（例如）孤立的菜單項，而是在菜單中間中斷。如何指定一個元素，然後在css flexbox中包裝？

這裏出發HTML：

<ul> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
    <li>Four</li> 
    <li>Five</li> 
</ul>

和CSS：

ul { 
    display: flex; 
    flex-wrap: wrap; 
}

我喜歡像下面這樣：

/* inside media query targeting width */ 
li:nth-child(2n) { 
    flex-break: after; 
}

見的jsfiddle更完整的設置：http://jsfiddle.net/theazureshadow/ww8DR/

來源

2013-10-24 theazureshadow

對於基於視窗的尺寸包裹有*媒體查詢*，基於內容的數量，如兄弟姐妹數，有[***量包裝查詢***]（http://stackoverflow.com/a/33333193/3597276）。 –

重複的https://stackoverflow.com/questions/29732575/line-break-in-multi-line-flexbox，它有一個很好的答案。 –

[多線柔性線條中的換行符]可能的重複（http://stackoverflow.com/questions/29732575/line-break-in-multi-line-flexbox） – user

我不認爲你可以打破特定項目後。你可以做的最好的事情是改變你的斷點的彈性基礎。所以：

ul { 
    flex-flow: row wrap; 
    display: flex; 
} 

li { 
    flex-grow: 1; 
    flex-shrink: 0; 
    flex-basis: 50%; 
} 

@media (min-width: 40em;){ 
li { 
    flex-basis: 30%; 
}

這裏有一個例子：http://cdpn.io/ndCzD

================================ ============

~~編輯：你可以打破特定元素！海頓皮克林釋放一些CSS巫術在列表除了文章： http://alistapart.com/article/quantity-queries-for-css~~

編輯2：請看看這個答案：Line break in multi-line flexbox

@luksak還提供了一個很好的答案

來源

2013-10-24 21:02:33 jbenjohnson

這是一個相當不錯的主意！我已將它添加到jsfiddle。玩弄它，我認爲我更喜歡非基於百分比的方法，因爲基於百分比的方法可以防止進一步迴流，因爲縮小容器更多，儘管您可以在縮小時添加更多特定的斷點（當它應該降至33％等）。 – theazureshadow

在Chrome桌面上效果很好。所以很傷心它不會在android的webviews for android <4.4 :( –

也不能在Safari 7.0.3中運行。 – wprater

有一部分這聽起來確實像這樣...就在「靈活佈局算法」和「主要尺寸」部分的規範：

否則，從第一個未收項目開始，收集 consecuti直到第一次收集到的項目將不適合柔性容器的內部主體大小，或者直到遇到強制中斷爲止。如果第一個未收集的物品不合適，請將其收集到一行中。在CSS2.1頁面中斷前/頁面中斷後 [CSS21]或CSS3中斷前/後中斷[CSS3-BREAK]屬性指定分段中斷時，強制中斷。

從http://www.w3.org/TR/css-flexbox-1/#main-sizing

它肯定聽起來像（除了一個事實，即頁遊應該是用於打印），奠定了一個潛在的多彎曲線佈局（這是我從另一部分需要時該規格是一個沒有flex-wrap: nowrap）a page-break-after: always或break-after: always應該導致中斷或換行到下一行。

.flex-container { 
    display: flex; 
    flex-flow: row wrap; 
} 

.child { 
    flex-grow: 1; 
} 

.child.break-here { 
    page-break-after: always; 
    break-after: always; 
}

但是，我已經嘗試過這一點，它並沒有在那種方式實施......

Safari瀏覽器（最多7）
鉻（可達43 DEV）
歌劇（多達28 dev的& 12.16）
IE（最多11個）

它它的工作方式聽起來（至少對我而言）如下：

Firefox（28+）

樣品在http://codepen.io/morewry/pen/JoVmVj。

我在錯誤跟蹤器中沒有發現任何其他請求，所以我在https://code.google.com/p/chromium/issues/detail?id=473481報告了它。

但是，這個話題轉到了郵件列表中，不管它聽起來如何，這不是顯然他們的意思，除了我猜測分頁。因此，無法在Flex佈局中的特定框之前或之後進行換行，而無需在Flex兒童內嵌套連續的柔性佈局或以特定寬度擺弄（例如flex-basis: 100%）。

當然，這很令人討厭，因爲使用Firefox實現證實了我懷疑該功能非常有用。除了改進的垂直對齊之外，這種缺陷避免了在許多場景中大量使用柔性佈局。不得不添加具有嵌套柔性佈局的附加包裝標籤來控制行換行的點增加了HTML和CSS的複雜性，並且遺憾的是，經常會使order無用。同樣，強制項目的寬度爲100%可以降低flex佈局的「響應」潛力，或者需要大量高度特定的查詢或計數選擇器（例如，可以完成您需要的其他答案中提到的一般結果的技術）。

至少花車有clear。人們希望，有些東西可能會在某個點或另一個點被添加。

來源

2015-04-02 23:41:45 morewry

這聽起來很不可靠，據我瞭解，「page-break-after」用於當你打印和「break-after」用於「頁面，列或區域中斷行爲」，而不是換行符。 – Ajedi32

接受spec規範作者;正如我所提到的，它是str來自Flexbox的官方規範。這不是我正在提出的一個「酷招」的建議。順便說一句，包裝柔性排不是嚴格意義上的「內聯分界線」，我也沒有這麼說。「換到下一行」這句話只是幾種表達「它不再與其他盒子相鄰」的休閒方式之一。 – morewry

該死！這看起來很有希望：（ – Lyrical

您可以在容器上設置此實現這一點：

ul { 
    display: flex; 
    flex-wrap: wrap; 
}

而且對孩子設置此：

li:nth-child(2n) { 
    flex-basis: 100%; 
}

這會導致孩子來彌補容器寬度的100％在任何其他計算之前。由於在容器沒有足夠的空間的情況下容器被設置爲中斷，所以在這個孩子之前和之後都這樣做。

來源

2015-05-05 13:52:29 luksak

）謝謝！例如，如果你想每行有4個項目，你只需要：'li {flex-basis：25％}' –

設置100％或100％/元素的基礎每行不是一個很好的解決方案，因爲它需要你在容器上設置一個高度，否則它會擴展。 – Lucent

在子元素上設置最小寬度也會創建一個斷點。例如打破每3個元素，

flex-grow: 1; 
min-width: 33%;

如果有4個元素，這將有第4個元素包裝採取全100％。如果有5個元素，則第4個元素和第5個元素將包裝並取每個50％。

確保有父元素，

flex-wrap: wrap

來源

2017-01-24 20:10:30

如何指定一個元素，然後在css flexbox中包裝？

回答

相關問題