Flexbox，画布和动态调整大小

Question

我的基于canvas的应用程序出现了问题。

我有4个（或更多）画布，每个画布都包装在带有旁边内容的div中。这些包装器本身被包装在“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;
}

因为我需要一些调整大小的事件，所以我不使用CSS属性resize: both;。当我尝试添加.sideContent时遇到了麻烦，因为我想让它们位于每个画布的右侧。

在那之前，由于画布是绝对定位的，我只需要使用{.viewWrapper}.getBoundingClientRect().width|height动态更新宽度和高度（除了它们是flex:1之外，viewWrapper和hbox通过类似上面代码中展示的flex-grow手动调整大小）。现在，当我将画布切换到flex:1;并删除绝对属性时，它们不再缩小。此外，我还会在Chrome和Firefox中获得与{oneCanvas}.getBoundingClientRect()不同的值（没有在IE上测试），所以我也无法使用这个。

我该怎么办？如果您需要更多信息，请告诉我。

- lsagetlethias

---

向上。这里真的需要一些帮助 o/ - lsagetlethias

你能做一个Fiddle吗？ - user1156544

可以制作一个 JSFiddle 吗？ - Roger Russel

你是否考虑在每个 .viewWrapper div 中重复使用 flexbox？ - Darvanen

@L.S. 我尝试使用您提供的HTML/CSS创建一个jsfiddle，但是我在结果窗口中没有看到任何东西。您能否创建一个jsfiddle或者提供足够的信息用于创建一个可用的jsfiddle？ - Austin Pocus

@L.S.：我根据您提供的信息（https://jsfiddle.net/qrsww1o3/）制作了一个 fiddle。但是我不太明白您想要实现什么。您能否添加更多信息或更新我的 fiddle？ - Seika85

Answer 1

我不确定这是否是您想要的，但以下是一个示例。

Scene是一个flex容器，因此您可以操纵不同的hbox。viewwrapper也是一个flex容器，因此您可以调整canvas和aside的弹性方式。

添加position:absolute会影响布局的原因是绝对定位的元素不参与弹性布局。

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;
}

- derp