Как я могу использовать Angular flex-layout, чтобы создать выровненную по левому краю сетку, но центрировать всю сетку на экране? - PullRequest
Новая
       13

Как я могу использовать Angular flex-layout, чтобы создать выровненную по левому краю сетку, но центрировать всю сетку на экране?

0 голосов
/ 28 апреля 2020

Я пытаюсь использовать Angular flex-layout, чтобы создать сетку изображений с выравниванием по левому краю, но я хочу, чтобы вся сетка была центрирована на экране. Проблема в том, что я могу центрировать его только ряд за строкой, что делает последний вариант неоправданным. Я думаю, что мне нужен способ уменьшить контейнер до размера содержимого, но display: inline-block этого не делает.

См. Изображения:

Выровнено по левому краю, но не по центру экрана aka fxLayoutAlign = "начальный центр"

по центру экрана, но не по левому краю aka fxLayoutAlign = "центр по центру"

Нарисуйте макет того, что я хочу

Вот мой код: 

* {
  border: 1px solid black;
}

.gallery {
  display: inline-block;
}

.tile{
  background-color: red;
  width: 100px;
  height: 100px;
  margin: 10px;
}


<div class="gallery" fxLayout="row wrap" fxLayoutAlign="start center">
  <div class='tile' *ngFor="let number of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]"> </div>
</div>

1 Ответ

0 голосов
/ 28 апреля 2020

Убедитесь, что элемент галереи расположен относительно, фиксированный, абсолютный или липкий. И отрегулируйте поля с помощью «left and transform».

CSS: 

.tile{
  background-color: red;
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 1px solid black;
}

.gallery {
  position: absolute;
  left: 50%;
  transform:translateX(-50%);
}

<div class="gallery" fxLayout="row wrap">
  <div class="tile"  fxLayoutAlign="start center" *ngFor="let number of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]"></div>
</div>

См. Пример, работающий здесь: stackblitz

[Отредактировано]

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

Я надеюсь, что один из моих двух вариантов поможет вам.

CSS: 

.galery{
  margin-left: 50%;
  transform:translateX(-50%);

  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));
  grid-gap: 1em;
}

.title{
  background-color: red;
  width: 100%;
  height: 100px;
  border: 1px solid black;
}

<div class="galery">
  <div class="title" *ngFor="let number of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]"></div>
</div>

См. Пример, работающий здесь: stackblitz

...