Angular 的 fxFlex API 的问题

Question

我正在尝试为我的网站添加一个不错的联系表单，并且我正在使用 fxFlex 来组织它。 我的联系页面会有这个模板，但我没有很好地使用 fxFlex 并且有很多问题：Template example

目前，我的代码中有这个（我没有添加内容来只显示 div）：

<div id="background">
  <div class="container" fxLayout="row" fxLayoutGap="20px" fxLayout.xs="column">

    <div>
      <!-- Contact form will be here -->
    </div>

    <div>
      <div>
        <!-- Google map will be here -->
      </div>

      <div>
        <!-- Coordonates will be here -->
      </div>
    </div>
  </div>
</div>

如您所见，我在 div 中也有背景图片，但我认为这不是问题。

希望你能帮助我。

Answer 1

.container {
  display: flex;
}

.contact {
  width: 550px;
  height: 500px;
  margin-right: 20px;
  background-color: #ccc;
}
.right-side {
  width: 200px;
}

.map {
  height: 200px;
  width: 250px;
  margin-bottom: 20px;
  background-color: #333;
}

.coord {
  height: 200px;
  width: 250px;
  background-color: #333;
}

<div class="container" fxFlex fxLayout="column" fxLayoutGap="20px" fxLayout.xs="column">

    <div fxFlex="550px" class="contact">
      <!-- Contact form will be here -->
    </div>

    <div fxFlex="250px" class="right-side">
      <div class="map">
        <!-- Google map will be here -->
      </div>

      <div class="coord">
        <!-- Coordonates will be here -->
      </div>
    </div>
  </div>