Flex in grand(grand)children of row layout

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

Flex in grand(grand)children of row layout

Flex in grand(grand)children of row layout

css

flexbox

angularjs

angular-material