角材料弹性盒答案

【问题标题】：Angular Material Flex Box角材料弹性盒
【发布时间】：2016-10-31 22:16:03
【问题描述】：

我是 flexbox 的新手，与 bootstrap 相比，它看起来真的很复杂。我有一个启动画面，我需要在其中垂直和水平居中内容：

<div layout="row" layout-align="center center">
    <div layout="row" layout-wrap>
        <div flex="30">
            <img ng-src="images/logo.png" src="//:0" alt="example.com" title="Example" />
        </div>
        <div flex="45">
            <h2 class="title">example.com</h2>
        </div>
        <div flex="25">
            <h1 class="bang">Bang!</h1>
        </div>
    </div>
</div>

但是在我为其添加高度之前它不会居中：

style="height:500px"

为什么会这样？我的代码错了吗？这似乎不是正确的做法。

还有我的第二个row 和layout-wrap 中的项目，最后一个div 和flex=25 与第二个div 和flex=45 重叠。

基本上我想要做到这一点的垂直和水平居中的 div 并能够将该 div 拆分为我喜欢的任意多的列，同时保持根据屏幕尺寸调整的响应宽度。

【问题讨论】：

查看更新的答案。有帮助吗？

标签： flexbox angular-material

【解决方案1】：

也许这可以为您指明正确的方向 - CodePen

标记

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill layout="row" layout-xs="column" layout-align="center center">
    <div flex="30">
      <img ng-src="images/logo.png" src="//:0" alt="example.com" title="Example" />
    </div>
    <div flex="45">
      <h2 class="title">example.com</h2>
    </div>
    <div flex="25">
      <h1 class="bang">Bang!</h1>
    </div>
</div>

【讨论】：