Flex box, как указать столбец для размещения элемента - PullRequest
Новая
       55

Flex box, как указать столбец для размещения элемента

0 голосов
/ 31 октября 2019

У меня есть программное обеспечение, которое создает повторяемые блоки. Они используют flexbox. В настоящее время они выравниваются в зависимости от положения повторяемого блока, расположенного под каждым элементом. Скажите на изображении ниже, если повторяемыми блоками являются item1, item2, item3, item4. Он будет отображать столбец в том же порядке.

Но я хочу, чтобы у пользователя была опция с несколькими столбцами. Я могу использовать сетку, и, учитывая ее динамичность, я не могу ее использовать. Скажем, я могу присвоить свойству grid-item элемент 1 как firstone и создать grid-template-areas:"firstone secondone", но при назначении item2, item3 с grid-item secondone содержимое будет размещено один над другим.

grid-template-areas:"firstone secondone" "firstone secondone" "firstone secondone" справится с задачей, но у меня нет способа сгенерировать этот CSS, может быть более 4 элементов.

Любое возможное решение? Альтернативы?

enter image description here

1 Ответ

1 голос
/ 31 октября 2019

Использование сетки для этих задач - правильный выбор! То, что вы пытаетесь достичь, немного сложнее, чем сценарий использования flexbox .

. Используя grid-template-columns вместо grid-template-areas и селектор :first-child, этоможно достичь того, что вы описываете.

Учитывая этот пример HTML: 

<div>
  <article>Item 1</article>
  <article>Item 2</article>
  <article>Item 3</article>
  <article>Item 4</article>
</div>

Вы можете использовать этот CSS: 

div {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

article {
  grid-column: 2;
}

article:first-child {
  grid-column: 1;
}

Посмотрите на эту скрипку, чтобы увидетьпример. https://jsfiddle.net/h9k5x7uf/

Если вы хотите сделать это более динамичным или визуализированным сервером, замените :first-child на некоторые вспомогательные классы. 

.pull-left { grid-column: 1; }
.pull-right { grid-column: 2; }
...