Question

我在一个小断点中的一列中有一些我需要的标记。放大时，我希望它们分为两列，并重新排列顺序。

小屏幕草图： http://niklasholmberg.se/temp/1.png

草图更大的屏幕： http://niklasholmberg.se/temp/2.png

所有方框都有不同的未知高度。我用我对flexbox的有限知识来尝试这个。当我设置包裹四个盒子的外部容器的高度时，我才能使它工作。这是我不想做的事。

这是我的flexbox代码： http://niklasholmberg.se/temp/testflex.html

这可以通过flexbox实现，还是有另一种方法可以实现？最好没有任何js交换标记。

由于

Answer 1

这是使用flexbox的一种方式：

.main{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex-flow: space-between;
}

.item {
  margin: 10px;
  width: 45%;
  background-color: rgb(255,150,100);
}

<h4>Change the width of the browser.</h4>
<div class="main">
  <div class="item item1">1</div>
  <div class="item item2">2<br/>2</div>
  <div class="item item3">3<br/>3<br/>3</div>
  <div class="item item4">4<br/>4<br/>4<br/>4</div>
</div>

重新排序div并使用flexbox将它们放在两列中

1 个答案: