我正在尝试使用 flexbox 模型创建一个始终延伸到屏幕边界的多列布局。这完全符合我的要求。但是,我还希望能够水平调整一列或多列的大小。我已经尝试使用 jQuery UI 来允许调整大小,但不出所料,这并不完全正确
正如下面的演示所示,当您开始调整列的大小时,它会“跳跃”大约 100 个像素。
任何人都可以提供解决方案,或者动态调整 flexbox 容器大小的另一种方法吗?所有代码也粘贴在下面。
HTML:
<div id="container">
<div id="box1" class="widget-container">
<div class="widget">
<div class="widget-content">
Item 1
</div>
</div>
<div class="widget">
<div class="widget-content">
Item 2
</div>
</div>
</div>
<div id="box2" class="widget-container">
<div class="widget">
<div class="widget-content">
Item 3
</div>
</div>
</div>
<div id="box3" class="widget-container">
<div class="widget">
<div class="widget-content">
Item 4
</div>
</div>
<div class="widget">
<div class="widget-content">
Item 5
</div>
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
margin: 0;
}
body {
position: absolute;
height: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding: 0;
margin: 5px 5px 5px 5px;
}
#container {
height: 100%;
width: 100%;
background-color: #FFFFFF;
border-radius: 5px 5px 0 0;
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
-webkit-box-pack: justify;
-moz-box-pack: justify;
box-pack: justify;
-webkit-box-align: stretch;
-moz-box-align: stretch;
box-align: stretch;
}
#box1, #box2, #box3 {
margin: 5px;
padding: 2px;
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
-webkit-box-pack: start;
-moz-box-pack: start;
box-pack: start;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
}
div.widget
{
padding: 2px;
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
margin-bottom: 10px;
background-color: #999999;
}
div.widget-maximised {
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
-webkit-box-pack: start;
-moz-box-pack: start;
box-pack: start;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
}
div.widget div.widget-content
{
background-color: #FFF;
color: #333;
line-height: 1.2em;
overflow: auto;
padding: 5px;
margin: 5px;
width: auto;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
}
JS:
$("#box1, #box2, #box3").resizable({
handle: "e",
cancel: "cancel"
});