फ्लेक्सबॉक्स, कैनवास और गतिशील आकार बदलना

Question

मुझे अपने कैनवास-आधारित एप्लिकेशन में परेशानी है।

मेरे पास 4 (या अधिक) कैनवास हैं, प्रत्येक एक अलग सामग्री के साथ div में लपेटा है। वे wrapper खुद को "hbox" में लपेटा जाता है। लक्ष्य flexbox का उपयोग कर कैनवास की गतिशील ग्रिड बनाना है।

.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: both; मुसीबतों संलग्न जब मैं .sideContent जोड़ने की कोशिश के दाईं ओर का उपयोग नहीं करते क्योंकि मैं उन्हें चाहते हैं:

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

सीएसएस के साथ

प्रत्येक कैनवास।

इससे पहले, पूर्ण में कैनवास के साथ, मैं सिर्फ गतिशील साथ {.viewWrapper}.getBoundingClientRect().width|height (तथ्य यह है कि वे कर रहे हैं flex:1 के बगल में, viewWrapper और hbox मैन्युअल flex-grow तरह उपरोक्त कोड में पता चला है के साथ बदल दिया गया है) चौड़ाई और ऊंचाई को अद्यतन करने की जरूरत है। अब, जब मैं कैनवास को flex:1; पर स्विच करता हूं और पूर्ण संपत्ति को हटा देता हूं, तो वे अब और कम नहीं होते हैं। मुझे क्रोम और फ़ायरफ़ॉक्स (आईई पर परीक्षण नहीं किया गया) के बीच {oneCanvas}.getBoundingClientRect() से अलग-अलग मान भी मिलते हैं, इसलिए मैं इसका उपयोग नहीं कर सकता।

मैं क्या कर सकता हूं? मुझे बताएं कि आपको अधिक जानकारी चाहिए या नहीं।

Answer 1

मुझे यकीन नहीं है कि यह वही है जो आप चाहते थे, हालांकि यहां एक नमूना झुकाव है।

दृश्य एक फ्लेक्स कंटेनर है ताकि आप विभिन्न hboxes में हेरफेर कर सकें। व्यूवापर भी एक फ्लेक्स कंटेनर है ताकि आप समायोजित कर सकें कि आप अपने कैनवास और फ्लेक्स के लिए कैसे चाहते हैं।

कारण जोड़ने की वजह: पूर्ण लेआउट को प्रभावित करेगा क्योंकि पूरी तरह से स्थित तत्व फ्लेक्स लेआउट में भाग नहीं लेते हैं।

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