Элементы сетки расположения CSS

Question

Я пытаюсь реализовать сценарий: когда вы нажимаете на поле, в следующем ряду отображается «длинный ящик» (полная ширина).Проблема в том, что я получаю пробел после объекта, по которому щелкнули.

Можно ли отобразить «длинный ящик» в следующем ряду, не меняя структуру маленьких блоков с помощью CSS?Ссылка на jsfiddle: jsfiddle.net / mhLv7zj1 /

$(document).ready(function(){ 
    $(".box").click(function(){
      $(this).next('.open').toggleClass('toggled');
    });
    $(".open").click(function(){
      $(this).toggleClass('toggled');
    });
})

Answer 1

Вот один из вариантов.Вы можете удалить все li class="open" из вашего HTML и вместо этого использовать этот алгоритм при каждом клике:

• скрыть / удалить любые уже open элементы
• вычислить числоэлементов в гибкой строке , где живет элемент, на который нажали, и его положение
• , тогда вы будете знать, где сделать вставку, поэтому: в конце этой строки динамически вставьте open item (стилизуйте его заранее, чтобы он занимал целый ряд (flex: 0 0 100%;)

Answer 2

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

let boxes = document.querySelectorAll('ul > li');

boxes.forEach(b => {
  b.addEventListener('click', expand.bind(b));
});

function expand() {
  this.querySelector('.open').classList.toggle('visible');
}

ul {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  position: relative;
  flex-basis: 33%;
  height: 150px;
  background: blue;
  border: 1px solid white;
}

div.open {
  display: none;
  position: relative;
  top: calc(100% + 1px);
  left: -1px;
  width: calc(300% + 4px);
  height: 150px;
  border: 1px solid white;
  background: red;
  z-index: 1;
}

.visible {
  display: block!important;
}

<ul>
  <li> <div class="open"></div> </li>
  <li> <div class="open"></div> </li>
  <li> <div class="open"></div> </li>
  <li> <div class="open"></div> </li>
  <li> <div class="open"></div> </li>
  <li> <div class="open"></div> </li>
  <li> <div class="open"></div> </li>
  <li> <div class="open"></div> </li>
</ul>

PS.Этот пример не является идеальной фиксированной копией вашего кода, но он должен привести вас на правильный путь.

Answer 3

Используйте свойства flex и flex-basis.

$(document).ready(function() {
  $(".box").click(function() {
    $(this).next('.open').toggleClass('toggled');
  });
  $(".open").click(function() {
    $(this).toggleClass('toggled');
  });
})

ul {
  display: flex;
  list-style: none;
  flex-direction: row;
  flex-wrap: wrap;
}

.box {
  background: blue;
  height: 80px;
  flex: 1 1 32%;
  margin-right: 2px;
  margin-bottom: 2px;
}

.open {
  display: none;
  background: red;
  width: 100%;
  height: 80px;
}

.toggled {
  display: flex;
  flex-basis: 66.5%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<ul>
  <li class="box"></li>
  <li class="open"></li>
  <li class="box"></li>
  <li class="open"></li>
  <li class="box"></li>
  <li class="open"></li>
  <li class="box"></li>
  <li class="open"></li>
  <li class="box"></li>
  <li class="open"></li>
  <li class="box"></li>
  <li class="open"></li>
  <li class="box"></li>
  <li class="open"></li>
  <li class="box"></li>
  <li class="open"></li>
  <li class="box"></li>
  <li class="open"></li>
  <li class="box"></li>
  <li class="open"></li>
  <li class="box"></li>
  <li class="open"></li>
  <li class="box"></li>
  <li class="open"></li>
  <li class="box"></li>
  <li class="open"></li>
  <li class="box"></li>
  <li class="open"></li>
  <li class="box"></li>
  <li class="open"></li>
  <li class="box"></li>
  <li class="open"></li>
</ul>