Как вы «складываете» изгибаемые элементы в отдельных столбцах?

Question

Я отобразил свои элементы, используя свойство flex и flex-flow: column nowrap.Я быстро показал, как выглядят мои элементы: [this]

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

Answer 1

Не существует способа объединения контейнеров во flexbox, но есть способ обработки контейнеров, как если бы их не было.

Это display:contents

Браузеры (за исключением Firefox) удаляют любой элемент с отображаемым значением содержимого из него из дерева специальных возможностей.Это приведет к тому, что элемент и все его дочерние элементы больше не будут анонсированы технологией чтения с экрана.

^MDN

Поддержка , к сожалению, не универсальна, но растет.

Тогда ... Просто выровняйте каждый альтернативный элемент в столбце "new" по align-self: flex-end;

* {   margin: 0;   padding: 0;   box-sizing: border-box; }  ::before, ::after {   box-sizing:inherit; }

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  width:150px;
  height:150px;
  border:2px solid rebeccapurple;
}

body {
  width: 55%;
  min-width:150px;
  margin:1em auto;
  border:1px solid limegreen;
  display: flex;
  flex-direction: column;
}

.box:nth-child(odd) {
  align-self: flex-end;
}

.container {
  display:contents;
}

<div class="container">
  <div class="box">1</div>
  <div class="box">3</div>
  <div class="box">5</div>
  <div class="box">7</div>
  <div class="box">9</div>
  <div class="box">11</div>

</div>

<div class="container">

  <div class="box">2</div>
  <div class="box">4</div>
  <div class="box">6</div>
  <div class="box">8</div>
  <div class="box">10</div>
  <div class="box">12</div>
</div>

Answer 2

Я не понимаю, почему вы хотите сделать это таким образом?

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

- container
-- row
--- box
--- placeholder
--- box
--- placeholder

Примерно так: http://jsfiddle.net/d9jg1p2s/

---

РЕДАКТИРОВАТЬ: Забыли удалить заполнители на мобильномразмер.Вот, пожалуйста: http://jsfiddle.net/d9jg1p2s/1/