行レイアウトのグランド（グランド）の子供たち

Question

フレックス "システム"を使用して、 のような画像を取得したいのですが、私のレイアウトdivとフレックスの間に指示がいくつかあります。

<div id="i-can-control-this-div" layout="row" layout-wrap> 
    <div id="uncontrolled-div-generated-by-vendor-directive"> 
    <div id="another-generated-div"> 
     <div id="maybe-the-last-one"> 
     <div id="uncontrollable-div-arround-each-flex"> 
      <div flex="66">[flex=66]</div> 
     </div> 
     <div id="uncontrollable-div-arround-each-flex"> 
      <div flex="33"> 
      <div style="height:100px">[flex=33]</div> 
      </div> 
     </div> 
     <div id="uncontrollable-div-arround-each-flex"> 
      <div flex="66">[flex=66]</div> 
     </div> 
     <div id="uncontrollable-div-arround-each-flex"> 
      <div flex="33">[flex=33]</div> 
     </div> 
     <div id="uncontrollable-div-arround-each-flex"> 
      <div flex="33">[flex=33]</div> 
     </div> 
     <div id="uncontrollable-div-arround-each-flex"> 
      <div flex="33">[flex=33]</div> 
     </div> 
     <div id="uncontrollable-div-arround-each-flex"> 
      <div flex="33">[flex=33]</div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

私にこのCodePen上の最初のセクションのように見える何かを与えます。私はJQueryのスタイルをそのdivの中から選ぶことができると思いますが、そこにはクリーンな方法はありませんか？

Answer 1

flex属性を使用する必要があります。これにより、すべての使用可能な幅が含まれます。

<div id="i-can-control-this-div"> 
<div id="uncontrolled-div-generated-by-vendor-directive"> 
    <div id="another-generated-div"> 
    <div layout="row" flex layout-wrap id="maybe-the-last-one"> 
     <div flex="66" id="uncontrollable-div-arround-each-fl"> 
     <div>[flex=66]</div> 
     </div> 
     <div id="uncontrollable-div-arround-each-flex" flex="33"> 
     <div> 
      <div style="height:100px">[flex=33]</div> 
     </div> 
     </div> 
     <div flex="33" id="uncontrollable-div-arround-each-flex"> 
     <div >[flex=33]</div> 
     </div> 
     <div flex="66" id="uncontrollable-div-arround-each-flex"> 
     <div>[flex=66]</div> 
     </div> 
     <div flex="33" id="uncontrollable-div-arround-each-flex"> 
     <div >[flex=33]</div> 
     </div> 
     <div flex="33" id="uncontrollable-div-arround-each-flex"> 
     <div >[flex=33]</div> 
     </div> 
     <div flex="33"id="uncontrollable-div-arround-each-flex"> 
     <div >[flex=33]</div> 
     </div> 
    </div> 
    </div> 
</div> 

例を取り組んでいます。 http://codepen.io/next1/pen/xVyPGw