Flexbox,画布和动态调整大小

Question

我的基于画布的应用程序遇到了麻烦.

我有4个(或更多)画布,每个画布都包含在内容中.那些包装器本身被包装成"hbox".目标是使用创建一个动态的画布网格flexbox.

<div id="primaryScene" class="scene">
    <div class="hbox" id="hbox0" style="flex-grow: 1.2;">
        <div class="viewWrapper" id="view0" style="flex-grow: 0.4;">
            <canvas class="canvasView"></canvas>
            <aside class="sideContent"></aside>
        </div>
        <div class="viewWrapper" id="view1" style="flex-grow: 1.6;">
            <canvas class="canvasView"></canvas>
            <aside class="sideContent"></aside>
        </div>
    </div>
    <div class="hbox" id="hbox1" style="flex-grow: 0.8;">
        <div class="viewWrapper" id="view2">
            <canvas class="canvasView"></canvas>
            <aside class="sideContent"></aside>
        </div>
        <div class="viewWrapper" id="view3">
            <canvas class="canvasView"></canvas>
            <aside class="sideContent"></aside>
        </div>
    </div>
</div>

用css:

.scene {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: column;
    flex-flow: column;
    overflow: hidden;
}

.hbox {
    min-height: 0;
    -webkit-flex: 1 1 0%;
    flex: 1 1 0%;
    display: -webkit-flex;
    display: flex;
    position: relative;
}
.viewWrapper {
    min-height: 0;
    -webkit-flex: 1 1 0%;
    flex: 1 1 0%;
    position: relative;
    margin: 0 2px 2px 0;
}

.canvasView {
    display: block;
}

.canvasView {
    position: absolute;
}

.sideContent{
    max-width: 120px;
    overflow-x: hidden;
    overflow-y: auto;
    margin-right: 6px;
}

因为我需要一些resize事件,所以resize: both; 当我尝试添加时,我不使用CSS属性Troubles附加,.sideContent因为我希望它们位于每个画布的右侧.

在此之前,使用绝对的画布,我只需要动态更新宽度和高度{.viewWrapper}.getBoundingClientRect().width|height (除了它们之外flex:1,viewWrapper和hbox手动调整大小,flex-grow如上面的代码所示).现在,当我切换画布flex:1;并删除绝对属性时,它们不再缩小.我也从{oneCanvas}.getBoundingClientRect()Chrome和Firefox之间得到了不同的值(没有在IE上测试)所以我也不能使用它.

我能做什么？如果您需要更多信息,请告诉我.

Answer 1

我不确定这是否是您想要的，但是下面是一个示例小提琴。

场景是一个弹性容器，因此您可以操纵不同的水平盒。viewwrapper 也是一个弹性容器，这样您就可以调整画布和旁边的弹性方式。

之所以添加position:absolute会影响布局，是因为绝对定位的元素不参与flex布局。

https://www.w3.org/TR/css-flexbox-1/#abspos-items

https://jsfiddle.net/mzrrsunn/1/

.scene {
    display: flex;
}

.hbox {
    flex: 1;
}
.viewWrapper {
    display: flex;
    margin: 0 2px 2px 0;
}

.canvasView {
    flex: 1 1 60%;
}

.sideContent{
    flex: 0 1 40%;
}

canvas{
  border:1px solid black;
}

aside {
  border: 1px solid blue;
}