角度材料柔性布局 - 调整大小时行中的第二个容器不移动答案

【问题标题】：Angular material flex layout - second container in the row doesn't move when resize角度材料柔性布局 - 调整大小时行中的第二个容器不移动
【发布时间】：2017-02-13 06:16:01
【问题描述】：

我正在使用有角度的材质布局。我在行中有两个容器，当我调整页面大小时，我希望第二个容器移动到第一个容器下方。第二个容器不会在第一个容器下方移动。

<fieldset>
<legend>Test</legend>
<div layout="row" layout-xs="column">
    <div flex="60" style="height:900pt">
        <divng-show="testShow">
            <div id="overlayDiv"></div>
            <iframe class="iFrameClass"  ng-show="showIfSelected"></iframe>
        </div>
    </div>
    <div flex="40" style="height:900pt">
        <md-content>
            <md-table-container ng-show="showIfSelected">
                <table md-table>
                </table>
            </md-table-container>
        </md-content>
    </div>
</div>

【问题讨论】：

如果没有 CSS，上面的代码就没有什么价值了。 minimal reproducible example 是必需的。
代码使用的是angular材质框架css
仍然需要演示。我们无权访问“角度材料框架 css”...您可能无法修改它。

标签： css flexbox angular-material

【解决方案1】：

Flex 40% 意味着它占据了容器的 40%。容器的大小无关紧要。如果您需要响应式设计，您可以设置最小宽度来弯曲孩子。例如，您希望一个低于另一个宽度小于 400 像素：

div.row{
        display: flex;
        flex-wrap: wrap;
    }

    div.child{
       min-width: 201px; /* it is smaller than all mobiles. */
      height:100px;
      border: 1px solid black;
    }

<div class="row">
  
  <div class="child" style="flex:60;"></div>
  <div class="child" style="flex:40;"></div>
  <div>

在代码 sn-p 中，您不能更改浏览器大小。

【讨论】：

【解决方案2】：

您的第二个容器无法移动，因为 flex=40 和您的第一个容器 flex=60，这个总和 = 100，它是 100%。使用 flex，您的两个容器将始终位于同一行。

【讨论】：