大(大)行布局中的Flex

Question

我希望使用flex "system“来获取类似于下面的图像的内容，但是在布局div和flex之间有一些生成的指令：

​

​

<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