我有一个充满方块的页面，里面堆满了display: inline-block。我想做四到两倍大，所以我用float: left或right来放置其他块。

我的问题是，如果我有一个五元素的行，我怎么能放一个更大的元素在中间吗？ （如float放在侧面一样）。

以下是示例代码段：




 #wrapper{
  width: 516px;
}
.block{
  display: inline-block;
  width: 90px;
  height: 50px;
  margin: 5px;
  background-color: red;
}
.bigger{
  height: 110px;
} 

 <div id="wrapper">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block bigger"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>





这是我希望从上方的摘录中获得的内容

#1 楼

您的子元素具有固定的高度（.block）。根据这些信息，我们可以推断出容器的高度（#wrapper）。

通过了解容器的高度，可以使用带有flex-direction: column和flex-wrap: wrap的CSS Flexbox实现布局。
容器上的固定高度用作断点，告诉伸缩物品在哪里包装。




 #wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 120px;
  width: 516px;
}
.block {
  width: 90px;
  flex: 0 0 50px;
  margin: 5px;
  background-color: red;
}
.bigger {
  flex-basis: 110px;
} 

 <div id="wrapper">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block bigger"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>





jsFiddle

这里有一个解释，为什么除非容器上有固定的高度/宽度，否则flex项不能包装：https://stackoverflow.com/ a / 43897663/3597276

评论

我喜欢弹性布局，所以我非常喜欢这个答案！但是，如果您不知道包装纸的高度怎么办？

– PaulCo
17 Mar 30 '17 at 8:57
我发布了另一个解决包装高度问题的答案。

–迈克尔·本杰明（Michael Benjamin）
17-4-17在23:03


#2 楼

为了使布局与Flexbox配合使用，您需要使用嵌套容器或知道容器的高度（请参阅此页面上的其他答案）。网格并非如此。代码结构非常简单。




 #wrapper {
  display: grid;                                     /* 1 */
  grid-template-columns: repeat(5, 90px);            /* 2 */
  grid-auto-rows: 50px;                              /* 3 */
  grid-gap: 10px;                                    /* 4 */
  width: 516px;
}
.bigger {
  grid-row: 1 / 3;                                   /* 5 */
  grid-column: 2 / 3;                                /* 6 */
}
.block {
  background-color: red;
} 

 <div id="wrapper">
  <div class="block"></div>
  <div class="block bigger"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>





jsFiddle

注意：


建立块级网格容器。 （规范参考）
指示网格创建90px宽度的列，并重复该过程5次。 （规范参考）
将隐式创建网格行（即，根据需要自动创建）。每个隐式行的高度应为50px。 （规范参考）
网格项周围的排水沟。 grip-gap是grid-row-gap和grid-column-gap的简写。（规格参考）
指示大型项目跨越行1到3。（两行网格中有三行。）（规格参考）。 />指示大项目跨越网格第2列到第3列。（五列网格中有6列。）（参考规范）


浏览器对CSS的支持Grid


Chrome-截至2017年3月8日（版本57）全面支持
Firefox-截至2017年3月6日（版本52）全面支持
Safari -截至2017年3月26日（版本10.1）全面支持
Edge-截至2017年10月16日（版本16）完整支持
IE11-不支持当前规范；支持过时的版本

以下是完整图片：http://caniuse.com/#search=grid