Всегда заверните по крайней мере два элемента с помощью flexbox

Он имеет контейнер flexbox с flex-flow: row wrap;, чтобы обернуть все элементы. Это почти то, что я хочу.

Когда он начинает обертываться, номер позиции 6 обертывается во вторую строку:

1 2 3 4 5
    6

Но всегда я хочу обернуть по крайней мере два элемента, когда он начнет обертываться, поэтому у вас никогда не будет отдельных элементов в строке:

1 2 3 4
  5 6

Ответ 1

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

.item {
  display: inline;
}

.item::before {
  content: ' ';
  font-size: 0;
}

.item:last-child::before {
  content: '';
}

Вот Fiddle с ним в действии.

Ответ 2

Хотя это не самое элегантное решение, вы можете обернуть последние два элемента в другой flexbox:

<html>
    <head>
        <style>
            .flex {
                display: flex;
                flex-wrap: wrap;
            }
            .flex > div {
                flex: 1 0 auto;
                padding: 20px;
                text-align: center;
            }
            .flex .flex {
                padding: 0;
                flex-grow: 2;
            }
        </style>
    </head>
    <body>
        <div class="flex">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div class="flex">
                <div>5</div>
                <div>6</div>
            </div>
        </div>
    </body>
</html>

Смотрите здесь ручку: https://codepen.io/anon/pen/prodVd

Ответ 3

Здесь подход, который должен работать при ограничении ширины элемента

Предполагая, что ширина равна 50px:

.container {
  display: flex;
  flex-flow: row wrap; 
}

.flex-item: {
  width: 50px;
  display: block;
}

.flex-item:nth-child(even) {
  translateX(100%)
  margin-left: -100px;
}

.flex-item:nth-child(odd) {
  margin-right: 50px;
}

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

Ответ 4

Вы можете попробовать обернуть 2 родственных элемента гибким контейнером.