2015-10-06 51 views
4

我有這樣的佈局flexboxFlexbox的佈局 - 多行如果有足夠長的

Flexbox needed layout

然而,當在第一線增加一列的內容,我不明白我的想。接下來的這個圖像解釋什麼,我得到我想要的東西:

enter image description here

基本上,我想框3跨越多行,如果需要的話,在不改變box4的位置

請幫我這個。謝謝

+4

請將您的代碼發佈在代碼片段中並演示[MCVE](http://stackoverflow.com/help/mcve)。 – Alejalapeno

+0

你也有2個重複的圖像與所需的位置,這是混亂。 –

+0

我不認爲這是令人困惑的......我有image1的佈局。但是當box3的內容增加時,我得到了image2中的佈局(我得到了什麼)。我想要的是image3(我想要什麼)。基本上,如果需要,我希望框3跨越多行,而不改變box4的位置。但我編輯得更清楚。 – migasll

回答

-1

Flexbox不能這樣工作。它不會隨機填寫以使用最小高度。如果您甚至有可能讓瀏覽器猜測您想要的內容,那麼您的瀏覽器所需的計算會減慢一切。你恐怕不得不調整你的設計。

+0

我認爲你說的對flexbox來說是不可能的,但我不認爲計算會減慢瀏覽器的速度......無論如何,我想我會用JS來檢查最長盒子的額外高度,然後加上margin-top: - (extraheight)px到box number 4.這樣做 – migasll

+0

他們可能會稍微有點,但最重要的原因是這是不可能的,因爲你可以想到百種不同的方式讓人們想要類似的效果,但條件略有不同。 – MueR

-1

Flexbox不會做你需要的東西,但你仍然可以使用它們。

下面是它會是什麼樣子所以下面的解釋會更容易理解:

enter image description here

  1. 創建2個集裝箱,將顯示inline-block。第一個(藍色塊)爲75%,第二個爲25%
  2. 藍色塊flexbox。根據需要設置彈性規則。
  3. 紅色塊有自己的容器,它也是你想要的樣式。

基於這意味着塊1將始終是它的父的25%您發佈的圖像,藍色塊1和2是flex: 1flex: 2。這就是爲什麼我設置25%到紅色塊容器


全CSS檢查小提琴:https://jsfiddle.net/Paf_Sebastien/dyxtq144/

+0

你好,謝謝你的幫助。問題是我想要最後一個藍色框填充頁面的寬度,如果紅色框的高度減少,如下所示: http://imgur.com/8O5YmoC – migasll

+0

好吧,我明白了,所以它變得相當複雜的,你可能需要在紅色的盒子上使用'浮動',但解決方案將完全不同於我的,對不起... – Sebastien

0

這件事是不可能使用Flexbox的。你應該使用大量可用的JQuery插件。

你可以在JQuery插件後查看它。 1)Packery

2)MCPants

3.)Gridster.

4.)Masonry

這是一些可用的插件,它會給你,你想要的輸出。 您還可以在搜索引擎上找到其他插件。
希望它有幫助。

+0

好的,謝謝,我明天就去看看吧! – migasll

+0

http://meta.stackoverflow.com/questions/307928/needless-bulk-tag-edits –