可靠地更改柔性箱的佈局方向

我試圖用css3來實現以下佈局更改。我的主要問題是，我不想明確添加大小。我寧願讓佈局自由流動。我正在使用css flexbox。並且在自動包裝之後，小物品的佈局方向應該改變。可靠地更改柔性箱的佈局方向

我做了這個行爲幾乎@media(orientation: portrait)工作。但是，我仍然對紅色框的大小有限制。你會發現有第三種狀態，黃色項目在紅色框旁水平顯示。

div { 
 
    min-width: 50px; 
 
    min-height: 50px; 
 
    margin: 8px; 
 
    justify-content: flex-end; 
 
} 
 

 
#body { 
 
    background: lightgray; 
 
    padding: 8px; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
#box { 
 
    background: lightpink; 
 
    min-width: 150px; 
 
    height: 220px; 
 
    flex-grow: 1; 
 
} 
 

 
.item { 
 
    background: lightyellow; 
 
} 
 

 
#wrap { 
 
    margin: 0; 
 
} 
 

 
@media(orientation: portrait) { 
 
    #wrap { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: flex-end; 
 
    } 
 
}

<title>Example</title> 
 
<div id="body"> 
 
    <div id="box"></div> 
 
    <div id="wrap"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    </div> 
 
</div>

請並不是所有大小純粹是膚淺的。

我想知道是否有可能在景觀模式處於活動狀態時強制項目框包裝。或者也許有一個紅色框的選擇器填充完整的水平視口。

來源

2017-04-01 tynn

不蘇添加此如果這將有助於https://jsfiddle.net/repzeroworld/3pfqfyqm/6/。 – repzero

使它更好。 – tynn

您可以使用在div一個display:block id爲body和媒體規則

@media(orientation: portrait) { 
#wrap { display: flex; flex-wrap: wrap; justify-content: flex-end;border:solid red;} 
#body{display:block;} 
}

fiddle here with resizable window其他

片段

<!DOCTYPE html> 
 
<meta charset="utf-8"> 
 
<style type="text/css"> 
 
div { min-width: 50px; min-height: 50px; margin: 8px; justify-content: flex-end; } 
 
#body { background: lightgray; padding: 8px; display: flex; flex-wrap: wrap; } 
 
#box { background: lightpink; min-width: 150px; height: 220px; flex-grow: 1; } 
 
.item { background: lightyellow; } 
 
#wrap { margin: 0;border:solid green; } 
 
#break{} 
 
@media(orientation: portrait) { 
 
#wrap { display: flex; flex-wrap: wrap; justify-content: flex-end;border:solid red;} 
 
#body{display:block;} 
 
} 
 
</style> 
 
<title>Example</title> 
 
<div id="body"> 
 
<div id="box"></div> 
 
<div id="wrap"> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
</div></div>

來源

2017-04-01 15:19:56 repzero

可靠地更改柔性箱的佈局方向

回答

相關問題