Flex的特定布局问题——Angular Material——Angular 2答案

【问题标题】：Specific layout issue with Flex -- Angular Material -- Angular 2Flex的特定布局问题——Angular Material——Angular 2
【发布时间】：2017-09-30 02:22:28
【问题描述】：

我正在尝试使用我的 Angular2 materialDesign 堆栈通过 Flex 重现此布局。

但是块 2 和 3 总是在数字 4 的底部...

【问题讨论】：

您使用的是哪个版本的 angular-flex？此外，Flex 没有“布局”指令。您的意思是改用“fxLayout”吗？
仅供参考，您可以将“flexbox”标签用于弹性布局问题。

标签： angular layout flexbox css-position angular-material

【解决方案1】：

你可以进入这个网站寻找你的问题。

https://tburleson-layouts-demos.firebaseapp.com/#/stackoverflow

作者给出了一个堆栈溢出问题的链接。

Flex Box out of borders?

希望对你有帮助。

【讨论】：

【解决方案2】：

我不知道您使用的材料设计语法糖，例如 fxFlex 属性，但如果有帮助，您可以查看下面的 flex 布局基础知识。

html, body {
  height: 100%;
}

.container {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.left {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card {
  flex: 1;
}

.right {
  flex: 1;
}

/* this is for styling only */
.card {
  background: blue;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.right {
  background: green;
  display: flex;
  color: white;
  align-items: center;
  justify-content: center;
}

<div class="container">
  <div class="left">
    <div class="card">1</div>
    <div class="card">2</div>
    <div class="card">3</div>
  </div>
  <div class="right">4</div>
</div>

【讨论】：