CSS-решение для коллапса элементов под заказ - PullRequest
Новая
       23

CSS-решение для коллапса элементов под заказ

0 голосов
/ 02 марта 2019

У меня есть набор элементов div, которые необходимо свернуть определенным образом, и я не уверен, как это сделать.Вот как это выглядит без сжатия: 

-------------
| 1 | 2 | 3 |
-------------
| 4 | 5 | 6 |
-------------

И свернуто: 

---------
|   2   |
---------
| 1 | 3 |
---------
| 4 | 5 |
---------
|   6   |
---------

Обратите внимание, что элемент 2 остается наверху и идет на всю ширину.

Так что мне нужно решение этой проблемы не-flexbox и не JS из-за институциональных требований клиента (проблемы поддержки браузера и т. Д.).

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

JS не совсем исключен, но я действительно не хочу, так как есть много других JS, связанных с этой функцией, которую я разрабатываю, и я не наденуне хочу добавлять сложность там.Я приму ответы flexbox, поскольку смогу убедить клиента, что это единственный способ решить эту проблему.Спасибо!

1 Ответ

0 голосов
/ 02 марта 2019

Вот решение, использующее упаковочный флексбокс , который использует свойство order, чтобы получить желаемый макет.Обратите внимание на использование order: -1, чтобы вывести второй элемент наверх.Остальные возятся с width .

См. Демонстрацию ниже: 

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
}

.wrapper>div {
  background: aliceblue;
  border: 1px solid blue;
  width: 50%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrapper div:nth-child(2) {
  width: 100%;
  order: -1;
}

.wrapper div:last-child {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .wrapper div:nth-child(2) {
    order: initial;
  }
  .wrapper>div {
    flex: 1 1 33%;
  }
}
<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
...