Question

我有一个像这样的简单结构...

<li>1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
<li>5</li>

我设置了样式，以便第一个盒子的面积是其余盒子的两倍。当我尝试弯曲元素时，第4框和第5框位于第1框的下方，而不是第2框和3框。这是what I want和what happens的图像。希望我解释得足够好。

这是一个快速的jsfiddle-https://jsfiddle.net/9h7mjenq/4/

抱歉，如果这是我应该知道的基本知识，我确实尝试进行搜索，但是最近我的谷歌搜索没有意义。

Answer 1

您可以使用flexbox以类似于的方式布置这些元素，但是顺序会稍有不同。诀窍是使用flex-direction：列并限制容器的高度，以便将以下li项目包装在新列中。

这是您的小提琴经过了一些修改：

body {
  background: #000;
}

#container {
  width: 500px;
  height: 250px;
  background: #fff;
  flex-flow: column wrap;
  display: flex;
}

li {
  width: 115px;
  height: 115px;
  margin: 5px;
  background: #0000ff;
}

li:nth-of-type(1) {
  width: 235px;
  height: 235px;
}

<div id="container">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</div>

如何做到让flex元素占据这些空间？

1 个答案: