Проблемы с fxFlex API для Angular

Я пытаюсь добавить красивую контактную форму для своего веб-сайта и использую fxFlex для ее организации. У меня был бы этот шаблон для моей контактной страницы, но я плохо использую fxFlex, и у меня много проблем с этим: Пример шаблона

В настоящее время у меня есть это в моем коде (я не добавлял контент, чтобы показать вам только 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, но я думаю, что это не проблема.

Надеюсь, ты сможешь мне помочь.

html css web flexbox

11.07.2018 13:47

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

438

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Спасибо чувак ! Единственная проблема, которую я вижу, заключается в том, что если я нахожусь в своем телефоне, 3 поля не в столбцах, что мне следует изменить?

— 11.07.2018 14:52

Надеюсь, это поможет вам - stackblitz.com/edit/…

— 18.07.2018 15:26

11.07.2018 14:26