admin管理员组

文章数量:1026445

I have trouble with my canvas-based application.

I have 4 (or more) canvas, each one wrapped into div with aside content. Those wrapper are themselves wrapped into "hbox". The goal is to make a dynamic grid of canvasses using 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>

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

Because I need some resize events, I don't use the CSS property resize: both; Troubles append when I try to add .sideContent because I want them at the right of each canvas.

Before that, with the canvas in absolute, I just needed to dynamically update width and height with {.viewWrapper}.getBoundingClientRect().width|height (beside the fact that they are flex:1, viewWrapper and hbox are manually resized with flex-grow like showed in the code above). Now, when I switch the canvas to flex:1; and remove the absolute property, they do not shrink anymore. I also get different values from {oneCanvas}.getBoundingClientRect() between Chrome and Firefox (didn't test on IE) so I can't use this either.

What can I do? Tell me if you need more information.

I have trouble with my canvas-based application.

I have 4 (or more) canvas, each one wrapped into div with aside content. Those wrapper are themselves wrapped into "hbox". The goal is to make a dynamic grid of canvasses using 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>

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

Because I need some resize events, I don't use the CSS property resize: both; Troubles append when I try to add .sideContent because I want them at the right of each canvas.

Before that, with the canvas in absolute, I just needed to dynamically update width and height with {.viewWrapper}.getBoundingClientRect().width|height (beside the fact that they are flex:1, viewWrapper and hbox are manually resized with flex-grow like showed in the code above). Now, when I switch the canvas to flex:1; and remove the absolute property, they do not shrink anymore. I also get different values from {oneCanvas}.getBoundingClientRect() between Chrome and Firefox (didn't test on IE) so I can't use this either.

What can I do? Tell me if you need more information.

  • javascript
  • css
  • html
  • canvas
  • flexbox
Share Improve this question edited May 10, 2016 at 13:26 ManoDestra 6,5036 gold badges29 silver badges50 bronze badges asked Aug 21, 2015 at 16:32 lsagetlethiaslsagetlethias 3382 silver badges14 bronze badges 6
  • Up. Really need some help here o/ – lsagetlethias Commented Aug 31, 2015 at 14:51
  • 2 Can you make a Fiddle? – user1156544 Commented Apr 15, 2016 at 15:36
  • 2 It's possible make a jsfiddle? – Roger Russel Commented May 24, 2016 at 17:18
  • Have you considered re-using flexbox within each .viewWrapper div? – Darvanen Commented Jun 9, 2016 at 6:08
  • @L.S. I tried making a jsfiddle with the HTML/CSS you provided, but I don't see anything in the result window. Could you please create a jsfiddle, or post enough information to create a working jsfiddle? – Austin Pocus Commented Jun 15, 2016 at 23:18
 |  Show 1 more ment

1 Answer 1

Reset to default 2

I am not sure if this is what you wanted, however here is a sample fiddle below.

Scene is a flex container so that you can manipulate the different hboxes. viewwrapper is also a flex container so that you can adjust how you want your canvas and aside to flex.

The reason why adding position:absolute would affect layout is because absolutely positioned elements do not participate in the flex layout.

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

https://jsfiddle/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;
}

I have trouble with my canvas-based application.

I have 4 (or more) canvas, each one wrapped into div with aside content. Those wrapper are themselves wrapped into "hbox". The goal is to make a dynamic grid of canvasses using 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>

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

Because I need some resize events, I don't use the CSS property resize: both; Troubles append when I try to add .sideContent because I want them at the right of each canvas.

Before that, with the canvas in absolute, I just needed to dynamically update width and height with {.viewWrapper}.getBoundingClientRect().width|height (beside the fact that they are flex:1, viewWrapper and hbox are manually resized with flex-grow like showed in the code above). Now, when I switch the canvas to flex:1; and remove the absolute property, they do not shrink anymore. I also get different values from {oneCanvas}.getBoundingClientRect() between Chrome and Firefox (didn't test on IE) so I can't use this either.

What can I do? Tell me if you need more information.

I have trouble with my canvas-based application.

I have 4 (or more) canvas, each one wrapped into div with aside content. Those wrapper are themselves wrapped into "hbox". The goal is to make a dynamic grid of canvasses using 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>

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

Because I need some resize events, I don't use the CSS property resize: both; Troubles append when I try to add .sideContent because I want them at the right of each canvas.

Before that, with the canvas in absolute, I just needed to dynamically update width and height with {.viewWrapper}.getBoundingClientRect().width|height (beside the fact that they are flex:1, viewWrapper and hbox are manually resized with flex-grow like showed in the code above). Now, when I switch the canvas to flex:1; and remove the absolute property, they do not shrink anymore. I also get different values from {oneCanvas}.getBoundingClientRect() between Chrome and Firefox (didn't test on IE) so I can't use this either.

What can I do? Tell me if you need more information.

  • javascript
  • css
  • html
  • canvas
  • flexbox
Share Improve this question edited May 10, 2016 at 13:26 ManoDestra 6,5036 gold badges29 silver badges50 bronze badges asked Aug 21, 2015 at 16:32 lsagetlethiaslsagetlethias 3382 silver badges14 bronze badges 6
  • Up. Really need some help here o/ – lsagetlethias Commented Aug 31, 2015 at 14:51
  • 2 Can you make a Fiddle? – user1156544 Commented Apr 15, 2016 at 15:36
  • 2 It's possible make a jsfiddle? – Roger Russel Commented May 24, 2016 at 17:18
  • Have you considered re-using flexbox within each .viewWrapper div? – Darvanen Commented Jun 9, 2016 at 6:08
  • @L.S. I tried making a jsfiddle with the HTML/CSS you provided, but I don't see anything in the result window. Could you please create a jsfiddle, or post enough information to create a working jsfiddle? – Austin Pocus Commented Jun 15, 2016 at 23:18
 |  Show 1 more ment

1 Answer 1

Reset to default 2

I am not sure if this is what you wanted, however here is a sample fiddle below.

Scene is a flex container so that you can manipulate the different hboxes. viewwrapper is also a flex container so that you can adjust how you want your canvas and aside to flex.

The reason why adding position:absolute would affect layout is because absolutely positioned elements do not participate in the flex layout.

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

https://jsfiddle/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;
}

本文标签： javascriptFlexboxcanvas amp dynamic resizingStack Overflow

版权声明：本文标题：javascript - Flexbox, canvas &amp; dynamic resizing - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745647182a2161094.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。