我爲使用Flexbox的應用程序創建了一個響應式佈局。 這個佈局需要左邊的可摺疊菜單,中間有一個標題和正文的塊,右邊有一個可切換的幫助窗格(還有更多,但這是基本結構)。white-space:nowrap打破flexbox佈局
左側菜單有兩種狀態:180px寬或80px寬。幫助窗格是隱藏的,或者需要180px。中間的盒子佔據了空間的其餘部分。 Flexbox的作用就像一個魅力。
當我使用white-space: nowrap
製作滾動div時,麻煩就開始了。我有一堆項目需要在水平滾動條中顯示,所以我有一個列表div與項目,設置爲overflow:auto
和white-space: nowrap
。
通常這個工程就像一個魅力,但現在它打破了我的柔性佈局。而不是採取父(flex)div的寬度,滾動使div更寬,這反過來推動幫助窗格出界。
下小提琴說明了這個問題:
http://jsfiddle.net/PieBie/6y291fud/
您可以通過單擊菜單欄中的切換幫助切換幫助窗格。 通過在菜單中單擊列表空白切換重新創建問題,將切換列表的white-space: no-wrap
CSS屬性。如果幫助窗格打開,您可以看到它被推出界限。
底部列表是我想要實現的,但我希望它是它的父項的全部寬度。
我可以在Chrome,Firefox,Opera,Vivaldi和Edge中重新創建問題。 Internet Explorer 11播放不錯(°_°)。我更喜歡純粹的CSS解決方案(SCSS也是一種選擇),但如果需要的話,我可以使用JS。
$('#nav-toggle').on('click',function(){
\t $(this).parent().toggleClass('collapsed');
});
$('#help-toggle').on('click',function(){
\t $('#help-pane').toggleClass('visible');
});
$('#list-toggle').on('click',function(){
\t $('#list').toggleClass('nowrap');
});
body,html{width:100%;height:100%;overflow:hidden;}
#body{
display:flex;
flex-flow:row nowrap;
position:absolute;
top:0;
left:0;
margin:0;
padding:0;
width:100%;
height:100%;
background-color:#abc;
overflow:hidden;
}
#shell{
flex: 1 1 auto;
display:flex;
flex-flow:row nowrap;
position:relative;
width:100%;
min-height:100%;
}
#left{
flex: 0 0 180px;
min-height:100%;
min-width: 0;
background:lightblue;
}
#left.collapsed{
flex: 0 0 80px;
}
#mid{
flex: 1 1 auto;
min-height:100%;
min-width: 0;
display:flex;
flex-flow:column nowrap;
align-items:stretch;
align-content:stretch;
position:relative;
width:100%;
min-height:100vh;
min-width: 0;
background:purple;
}
#mid-top{
flex: 0 0 auto;
min-height:100px;
background:green;
}
#mid-bottom{
min-height:calc(100% - 100px);
flex: 1 1 auto;
background:lightgreen;
}
#list{
overflow: auto;
width: 100%;
max-width: 100%;
}
#list.nowrap{
white-space: nowrap;
}
#secondlist{
overflow: auto;
max-width: 250px;
white-space: nowrap;
}
.list-item{
display: inline-block;
width: 50px;
height: 50px;
margin: 2px;
background: purple;
}
.list-item.odd{
background: violet;
}
#help-pane{
display:none;
flex: 0 0 0px;
background:red;
}
#help-pane.visible{
display:inherit;
flex:0 0 180px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="body">
<div id="shell">
<div id="left">
<div id="nav">
- menu -
</div>
<div id="help-toggle">
help toggle
</div>
<div id="nav-toggle">
nav toggle
</div>
<div id="list-toggle">
list whitespace toggle
</div>
</div>
<div id="mid">
<div id="mid-top">
- mid top -
</div>
<div id="mid-bottom">
- mid bottom- <br><br>
<div id="list">
<div class="list-item odd"> </div>
<div class="list-item"> </div>
<div class="list-item odd"> </div>
<div class="list-item"> </div>
<div class="list-item odd"> </div>
<div class="list-item"> </div>
<div class="list-item odd"> </div>
<div class="list-item"> </div>
<div class="list-item odd"> </div>
<div class="list-item"> </div>
<div class="list-item odd"> </div>
</div>
<hr>
<div id="secondlist">
<div class="list-item odd"> </div>
<div class="list-item"> </div>
<div class="list-item odd"> </div>
<div class="list-item"> </div>
<div class="list-item odd"> </div>
<div class="list-item"> </div>
<div class="list-item odd"> </div>
<div class="list-item"> </div>
<div class="list-item odd"> </div>
<div class="list-item"> </div>
<div class="list-item odd"> </div>
</div>
</div>
</div>
</div>
<div id="help-pane" class="visible">
- help-pane -
</div>
</div>
它看起來像您遇到的*默認的最小尺寸設置爲柔性物品*。默認情況下,Flex項目的大小不能小於其內容的大小。有一個簡單的解決方案。 http://stackoverflow.com/a/36247448/3597276 –