純CSS解決方案來推動的3項中間向下

我已經連續3個div的使用Flexbox的： 1 | 2 | 3

DIV 1的寬度是固定的。 Div 2'flexes'取1和3之間的可用空間，但最小應爲其內容大小（其變化）。 div 3需要是它所包含的內容的寬度，因此會有所不同。

所以我必須：

1 (fixed with) | 2 (flexes, but minimal width should be the width of the content) | 3 (width of content)

我想實現的是，如果在所有三個div的坐容器變得太小太滿足每個格，然後將中間部分的最小寬度要求（DIV 2）被推下。所以，我得到：

1 | 3 
----- 
    2

我知道我可以如何使用JavaScript實現這一點，但使用純CSS的解決方案，因爲他們知道我不知道的2和3事先內容的寬度是這可能嗎？

這裏有一個codepen這還沒有做我想做的，但可以作爲一個起點，爲您節省時間：http://codepen.io/anon/pen/grBwEp

注：我知道我怎樣才能既1 | 2 | 3或

1 | 3 
----- 
    2

通過更改order屬性。但是，由於我不知道內容的寬度以及內容的變化，我無法爲交換機提供固定斷點...

來源

2016-04-28 Seba Kerckhof

可以改變div的順序，如1，3，然後2，這樣可以很容易地使用css –

@A tifAzad不，因爲他們也會是'1 | 3 | 2「，如果他們在一排。而且我不能根據斷點來更改順序，因爲我不知道寬度。 –

檢查下面的答案 –

您可以強制第二個孩子（child2）處於新的狀態行，如果你添加width: 100%和秩序上次（order: 3），它看起來是這樣的：

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

 
.container > div { 
 
    text-align: center; 
 
    color: white; 
 
    font-weight: bold; 
 
} 
 

 
.container > div.child1 { 
 
    width: 150px; 
 
    background-color: red; 
 
    order: 1; 
 
} 
 

 
.container > div.child2 { 
 
    background-color: blue; 
 
    order: 3; 
 
    width:100%; 
 
} 
 

 
.container > div.child3 { 
 
    background-color: green; 
 
    order: 2; 
 
}

<div class="container"> 
 
    <div class="child1">1 (fixed width)</div> 
 
    <div class="child2">2 (flexes, but minimal width should be the width of the content)</div> 
 
    <div class="child3">3 (width of content)</div> 
 
</div>

來源

2016-04-28 07:57:33 Aziz

是的，但這是一個固定的解決方案。現在，它不會在兩種情況之間切換。而且我不能使用媒體查詢，因爲我不知道內容的寬度。 –

你可以只添加一個媒體查詢要與反應的大小。這裏600px的寬度的例子：

@media (max-width: 600px) { 
    .container > div.child1, 
    .container > div.child3 { 
    flex: 1 0 auto; 
    width: auto; 
    } 
    .container > div.child2 { 
    flex-basis: 100%; 
    order: 4; 
    } 
}

這裏您Codepen的分支版本：http://codepen.io/anon/pen/LNgRKa/left

來源

2016-04-28 08:00:46 kaiserkiwi

我不能使用斷點，因爲我不知道我必須打破的寬度，因爲內容是可變的。 –

那麼這裏是解決

<style> 
.one, .two { 
    width: 33.3%; 
    float: left 
} 
.three { 
    width: 33.3%; 
    float: right 
} 
.one { 
    background: #999; 
} 
.two { 
    background: #060; 
} 
.three { 
    background: #336; 
} 
@media (max-width: 768px) { 
.two { 
    width: 100%; 
    float: none; 
    clear: both; 
} 
} 
</style>

和HTML

<div class="one">01</div> 
<div class="three">03</div> 
<div class="two">02</div>

來源

2016-04-28 09:18:24

你可以使用div來玩我只是使用百分比的隨機寬度 –

OP希望第一個div的固定寬度爲150px，也沒有媒體查詢。 – Aziz

使用此CSS希望它可以幫助你-----> .one，.two {float：left} .three {float：right} .one {background：＃999; width：150px;} .two {background：＃060;} .three {background：＃336;} –

純CSS解決方案來推動的3項中間向下

回答

相關問題