Выровнять по центру в зависимости от количества столбцов

Question

Я использую следующий стиль для выравнивания столбцов в центре страницы с помощью susy:

card{ 
@include span(3 of 12);
  margin: 0 auto;
  cursor: pointer;
}

Но это не перемещение элементов (div) в центр страницы по умолчанию, если у меня есть один элемент, он помещает его на левую сторону, но я хочу, чтобы этот единственный элемент был расположен в центре страницы. Элементы растут динамически, и они не являются статичными.

Answer 1

span() Mixin генерирует float: left; свойство, которое удерживает ваш элемент от центрирования. Вместо этого используйте функцию, чтобы избежать нежелательного вывода:

.card { 
  width: span(3 of 12);
  margin: 0 auto;
  cursor: pointer;
}

---

Обновление на основе уточняющего комментария...

Существует два способа выравнивания по центру / левому краю в зависимости от братьев и сестер. Один использует flexbox:

.container {
  display: flex;
  justify-content: center;
}

.card { 
  flex: 0 0 span(3 of 12);

  // add gutters to all but the first element
  & + & {
    margin-left: gutter(of 12);
  }
}

Другой использует только родную логику:

.card { 
  @include span(3 of 12);
  outline: 1px dotted red;

  &:first-child:last-child {
    float: none;
    margin: 0 auto;
  }
}

Решение flexbox сохраняет все по центру, пока вы не заполните пространство. Плавающее решение центрируется только при наличии одного .card