我在我的 Angular 1.5 项目中使用 Angular Material 1.1.0 和 UI-Router 1.0.0-beta.1，而 UI-Router 似乎破坏了 flexbox 功能。
当 index.html 布局不包含 UI-Router 元素时，它会拉伸(stretch)并填充容器。当我添加 <div ui-view="container"></div>布局中断。
当我有以下情况时，Flex 正在工作:
<body ng-app="app" layout="column" ng-cloak>
<div layout="row" flex>
<div flex class="red">First item in row</div>
<div flex class="blue">Second item in row</div>
</div>
</body>
检查时显示添加了 flex 类:
<div layout="row" flex= class="layout-row flex">
<div flex class="red flex">First item in row</div>
<div flex class="blue flex">Second item in row</div>
</div>
但是当我添加 UI-Router 时，它会在页面顶部显示两行，并且元素不会垂直弯曲。 index.html 中的代码:
<body ng-app="app" layout="column" ng-cloak>
<div class="gradient flex">
<div ui-view="container" flex></div>
</div>
</body>
在容器中:
<div layout="row" flex>
<div flex class="red">First item in row</div>
<div flex class="blue">Second item in row</div>
</div>
检查时发现缺少 flex 类:
<div class="gradient flex">
<!-- uiView: container -->
<div ui-view="container" flex class="ng-scope flex">
<stream class="ng-scope ng-isolate-scope">
<div layout="row">
<div flex class="red">First item in row</div>
<div flex class="blue">Second item in row</div>
</div>
</stream>
</div>
</div>
我知道布局只影响该容器的直接子级的流向，并且 UI-Router 正在添加
<stream class="ng-scope ng-isolate-scope"> .我如何能够将 flex 类添加到 UI-Router View ？
最佳答案
在没有深入兔子洞的情况下，我基本上使用这个约定解决了我的问题:
<body ng-app="app" layout="column">
<!-- Top tool bar (top of screen) -->
<md-toolbar></md-toolbar>
<!-- This div holds both my sidenav and main content -->
<div flex layout="row">
<!-- This is my sidenav -->
<md-sidenav>...</md-sidenav>
<!-- This is my main content, fit into an ng-view element -->
<div flex ng-view></div>
</div>
那么这里发生了什么？我希望我的工具栏(在顶部)是 列内用我的 sid-nav 和主要内容。因为我正在治疗
<body>作为我的父元素，我赋予它 layout=column 的属性.现在我有顶部的工具栏和 <div>将侧导航和主要内容都堆叠在一个“列”中，我想做这个 <div>一行，这样我就可以并排堆叠导航栏和主要内容。家长 <div>持有这些获得layout=row .这个<div>的 child 是sidenav和主要内容，所以他们得到属性flex .请注意，我没有指定 flex在 md-sidenav ; Angular Material 为我解决了这个问题。唷。那是相当多的。看看它，看看它是否有意义。我也很乐意帮助您在 JSFiddle 或 Plnkr 上解决这个问题。让我知道!
关于angularjs - 使用 UI-Router 时 Angular Material 布局中断，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40982683/