Flexbox、画布和动态调整大小

Posted 2023-03-06

【中文标题】Flexbox、画布和动态调整大小

【英文标题】：Flexbox, canvas & dynamic resizing

【发布时间】：2015-11-15 16:35:56

【问题描述】：

我的基于画布的应用程序有问题。

我有 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 上测试）所以我也不能使用它。

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

【问题讨论】：

向上。真的需要一些帮助o/

你能做个小提琴吗？

可以做一个jsfiddle吗？

您是否考虑过在每个 .viewWrapper div 中重用 flexbox？

@L.S.我尝试使用您提供的 html/CSS 制作 jsfiddle，但在结果窗口中看不到任何内容。您能否创建一个 jsfiddle，或发布足够的信息来创建一个工作 jsfiddle？

【参考方案1】：

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

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

之所以加上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;