Flex的特定布局问题 - 角度材质 - 角度2

Question

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

但是第2和第3块总是位于数字4的底部......

Answer 1

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以进入此网站查找您的问题。

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

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

Flex Box out of borders?

希望它有所帮助。