Angular flex-layout: как добиться поведения Bootstrap .container?

Я новичок в API Angular Flex-layout, и у меня есть основной вопрос:

Класс Bootstrap 4 .container выглядит следующим образом:

.container {
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
  width: 100%;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

Как я могу добиться того же поведения с чистым API Angular Flex-Layout и без использования CSS?


angular-flex-layout
person Wolf359    schedule 08.10.2017    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Вы не можете сделать то же самое, используя стандартные точки останова из flex-layout, потому что они разные. См. https://github.com/angular/flex-layout/wiki/Responsive-API.

Однако вы можете использовать адаптивный API с модификаторами, чтобы указать другую максимальную ширину контейнера. Что-то вроде:

  <div class="content" 
       fxFlex.gt-xs="500px"
       fxFlex.gt-sm="800px"
       fxFlex.gt-md="1000px"
       fxFlex.gt-lg="1140px">  
  </div>

Вы также можете реализовать свои собственные точки останова по мере необходимости.

Сказав все это, мне все еще нравится определять эти «статические, а не компонентные динамические» размеры в моем css.

person Julia Passynkova    schedule 12.10.2017
comment
Я сделал именно это, но мне показалось странным определять размеры внутри html-разметки. Поэтому я вернулся к Bootstrap css (решение для сетки), потому что у BT есть и другие преимущества. Кроме того, с сеткой из 12 столбцов гораздо проще кодировать. - person Wolf359; 13.10.2017
comment
Я думаю, что это должно быть помечено как ответ на этот вопрос @MehmetGunacti - person nclarx; 25.11.2017
comment
кажется очень ограниченным ответом на общий вопрос. Я неплохо разбираюсь в css и angular, но новичок в угловом гибком макете, и это мне не помогло. - person n4nite; 01.01.2021