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

问题描述：

我试图用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>

请并不是所有大小纯粹是肤浅的。

我想知道是否有可能在景观模式处于活动状态时强制项目框包装。或者也许有一个红色框的选择器填充完整的水平视口。

不苏添加此如果这将有助于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>

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

相关推荐