CSS: Wrapping Divs

Question

У меня есть меню CSS с использованием checkbox:checked трюк здесь

Но моя проблема в том, что когда меню открыто, содержимое переполняется со стороны родителя. div - Как я могу сделать divЖидкость так, чтобы это обернулось к следующему ряду и толкнуло друг друга?

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

Я создал JSFiddle, который иллюстрирует то, что я пытаюсь сделать.

Спасибо:)

РЕДАКТИРОВАТЬ

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

РЕДАКТИРОВАТЬ

HTML:

<div id="content">
<input type="checkbox" />
  <div id="container">
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
  </div>
</div>

CSS:

#content {
  width: 500px;
  background: blue;
}
  input[type="checkbox"]:checked ~ #container {
    transition: left 1s;
    left: 250px;
    }

#container {
  position: relative;
  transition: left 1s;
  left: 0px;
  width: 100%;
}

.item {
  display: inline-block;
  width: 50px;
  background: red;
  margin: 4px;
}

Answer 1

Проблема в том, что вы перемещаете left значение смещения меню, которое перемещает пункт меню влево 250px, Подобная вещь произойдет, если вы используете margin-left собственность, из-за width:100%,

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

Проверьте приведенный ниже фрагмент, где я изменяю значение отступа

* {
  box-sizing: border-box;
}
#content {
  width: 500px;
  background: blue;
}
input[type="checkbox"]:checked ~ #container {
  transition: padding 1s;
  padding-left: 250px;
}
#container {
  position: relative;
  transition: padding 1s;
  left: 0px;
  width: 100%;
  padding-left: 0;
}
.item {
  display: inline-block;
  width: 50px;
  background: red;
  margin: 4px;
}

<div id="content">

  <input type="checkbox" />

  <div id="container">

    <div class="item">
      Hello
    </div>

    <div class="item">
      Hello
    </div>

    <div class="item">
      Hello
    </div>

    <div class="item">
      Hello
    </div>

    <div class="item">
      Hello
    </div>

    <div class="item">
      Hello
    </div>

    <div class="item">
      Hello
    </div>

  </div>
</div>

Answer 2

Проблема в том, что вы перемещаете весь контейнер, поэтому все внутри него тоже движется.

Что вы на самом деле хотите сделать, это переместить первый .item,

input[type="checkbox"]:checked ~ #container .item:first-child {
  transition: margin-left 1s;
  margin-left: 250px;
}

#content {
  width: 500px;
  background: blue;
}
input[type="checkbox"]:checked ~ #container .item:first-child {
  transition: margin-left 1s;
  margin-left: 250px;
}
#container {
  position: relative;
}
.item {
  display: inline-block;
  width: 50px;
  background: red;
  margin: 4px;
}

<div id="content">

  <input type="checkbox" />

  <div id="container">

    <div class="item">
      Hello
    </div>

    <div class="item">
      Hello
    </div>

    <div class="item">
      Hello
    </div>

    <div class="item">
      Hello
    </div>

    <div class="item">
      Hello
    </div>

    <div class="item">
      Hello
    </div>

    <div class="item">
      Hello
    </div>

  </div>
</div>

Answer 3

В соответствии с вашим примером JSFiddle вы должны изменить несколько свойств:

HTML: одна строка должна быть добавлена ​​для очистки плавающего

<div id="content">

<input type="checkbox" />

  <div id="container">

    <div class="item">
    Hello
    </div>

    <div class="item">
Hello
    </div>

    <div class="item">
Hello
    </div>

    <div class="item">
Hello
    </div>

    <div class="item">
Hello
    </div>

    <div class="item">
Hello
    </div>

    <div class="item">
Hello
    </div>
    <div style="clear:both"></div>

  </div>
</div>

И CSS будет:

#content {
  width: 500px;
  background: blue;
}
  input[type="checkbox"]:checked ~ #container {
    transition: margin-left 1s;
    margin-left: 250px;
    }

#container {
  position: relative;
  transition: margin-left 1s;
  margin-left: 0px;
}

.item {
  display: inline-block;
  width: 50px;
  background: red;
  margin: 4px;
}