Question

它有一个带flex-flow: row wrap;的弹性箱容器来包装所有项目。这几乎就是我想要的。

当它开始换行时，第6项包裹到第二行：

1 2 3 4 5
    6

但是我总是想在开始包装时至少包装两件物品，这样你就不会有一件物品在一条线上：

1 2 3 4
  5 6

Answer 1

虽然不是最优雅的解决方案，但您可以将最后两个元素包装在另一个弹性框中：

<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

Answer 2

我找到了为内联元素执行此操作的方法，但是当与内联块一起使用时，它将表现inconsistently across browsers。仍然不是一个解决方案，但也许有人可以找到一种方法来使其行为与内联块元素。

.item {
  display: inline;
}

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

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

这是Fiddle，其中包含它。

Answer 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;
}

诀窍是基本上将每个第二个元素的“足迹”移动到其前身（负边距），仍然将其显示在其原始位置（翻译）并让前任为此目的吃剩余空间（正边距）破行。

Answer 4

您可以尝试使用flex容器包装2个兄弟元素

始终使用flexbox包装至少两个项目

4 个答案: