Нарушить поток с внешним элементом - PullRequest
Новая
       11

Нарушить поток с внешним элементом

0 голосов
/ 18 февраля 2019

У меня есть flexbox с элементами, которые отображаются следующим образом:

enter image description here

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

enter image description here

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

Я пробовал делать поля flow: left и display: inline-block в различных комбинациях, но не могу его получитьсделанный.

.container {
  width: 120px;
  height: 180px;
  margin: 40px 0 0 100px;
}

.flexbox {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 120px;
  height: 180px;
  background: pink;
}

.inbox {
  width: 50px;
  height: 50px;
  margin: 5px;
  background: purple;
  color: #fff;
  margin-left: auto;
}

.box {
  float: left;
  width: 110px;
  height: 60px;
  margin: -60px 0 0 -60px;
  background: orange;
}
<div class="container">
  <div class="flexbox">
    <div class="inbox"> 1 </div>
    <div class="inbox"> 2 </div>
    <div class="inbox"> 3 </div>
    <div class="inbox"> 4 </div>
    <div class="inbox"> 5 </div>
  </div>
  <div class="box"></div>
</div>

И скрипка

Редактировать Меня интересует только левый нижний угол,так что подойдет любой трюк.

Ответы [ 2 ]

0 голосов
/ 18 февраля 2019

Если вы используете flex-wrap: wrap-reverse вместе с column-reverse направление на изгиб и justify-content: flex-end, вы можете получить конфигурацию, но не порядок элементов.

Обратите внимание, что порядок элементов обратный разметке, хотя - см. Демонстрацию ниже: 

.container {
  width: 120px;
  height: 180px;
  margin: 40px 0 0 100px;
}

.flexbox {
  display: flex;
  flex-direction: column-reverse; /* CHANGED */
  flex-wrap: wrap-reverse; /* CHANGED */
  justify-content: flex-end; /* CHANGED */
  width: 120px;
  height: 180px;
  background: pink;
}

.inbox {
  width: 50px;
  height: 50px;
  margin: 5px;
  background: purple;
  color: #fff;
  margin-left: auto;
}

.box {
  float: left;
  width: 110px;
  height: 60px;
  margin: -60px 0 0 -60px;
  background: orange;
}
<div class="container">
  <div class="flexbox">
    <div class="inbox"> 1 </div>
    <div class="inbox"> 2 </div>
    <div class="inbox"> 3 </div>
    <div class="inbox"> 4 </div>
    <div class="inbox"> 5 </div>
  </div>
  <div class="box"></div>
</div>
0 голосов
/ 18 февраля 2019

Не лучшее решение, оно может дать вам основу для обновлений (например, добавление ajax в уравнение).Надеюсь, это будет вам полезно! 

var element = document.getElementsByClassName('box')[0];
var rect = element.getBoundingClientRect();
x = rect.left;
w = rect.width;
var xa = document.getElementsByClassName('inbox');
var k = Array.from(xa).slice(-1).pop();
var rect2 = k.getBoundingClientRect();
x2 = rect2.left;
if(x+w > x2){
console.log(x + w , x2)
 k.style.left =+ (x) +"px";
}
.container {
  width: 120px;
  height: 180px;
  margin: 40px 0 0 100px;
}

.flexbox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 120px;
  height: 180px;
  background: pink;
}

.inbox {
  position:relative;
  width: 50px;
  height: 50px;
  margin: 5px;
  background: purple;
  color: #fff;
}

.box {
  float: left;
  width: 110px;
  height: 60px;
  margin: -60px 0 0 -60px;
  background: orange;
}
<div class="container">

  <div class="flexbox">
    <div class="inbox"> 1 </div>
    <div class="inbox"> 2 </div>
    <div class="inbox"> 3 </div>
    <div class="inbox"> 4 </div>
    <div class="inbox"> 5 </div>
  </div>

  <div class="box"></div>

</div>
...