如何将flexbox包裹在多行和多列上? [英] How to wrap flexbox over multiple rows and columns?

问题描述

我正在尝试以砌体形式建造一个画廊，但是我不能全神贯注于包装弹性盒吗?

I'm trying to build a gallery in form of a masonry, but I can't get my head around wrapping of flexboxes?

我得到了一个简单的UL清单，并添加了所需的样式，但是事情并没有按照需要进行浮动和包装.

I got a simple UL list and I've added the style needed, but things are not floating and wrapping as it should.

.masonry {

  margin: 48px -2px;
  padding-left: 0;
  list-style: none;
  align-items: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  display: flex;
}

.masonry li {
	
  height: 300px;
  flex-basis: calc(33.33% - 4px);
  margin: 2px;
  text-align: center;
  display: flex;
  
  background-color: #C9F4FF;
}

.masonry li:nth-child(1), .masonry li:nth-child(7) {

  height: 604px;
  
  background-color: #FFB4FF;
}

.masonry li:nth-child(4), .masonry li:nth-child(4) {

  flex-basis: calc(66.66% - 4px);
  background-color: #B9EDA8;
}

<!-- masonry starts -->
    <ul class="masonry">
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
    </ul>
<!-- masonry ends -->

结果看起来像这样，真是有趣:)

The result looks like this, which is kinda funny :)

也许有人知道如何编写正确的CSS来正确包装东西?

Maybe someone knows how to write the correct CSS to make things wrap correctly?

推荐答案

Flexbox不能通过其自身的布局功能来做到这一点，它需要一些帮助，因此这里是一个CSS解决方案，它假定了项目的大小.

Flexbox can't do that with its own layout capabilities, it needs some help, so here is a CSS solution that assume the size of the items is given.

这里的主要技巧是在li内添加一个额外的元素，并使其成为样式化"的元素，然后将li用作主布局.

The main trick here is to add an extra element inside the li and make that the "styled" one, and use the li for the main layout.

浅绿色"项具有左/右页边距，以相应地推动它们，并为浅紫色"留出空间.

The "light green" items gets a left/right margin, to push them accordingly, and with that make space for the "light purple".

由于伸缩项(此处为li)不能动态地垂直和水平增长，因此我们改用其内部的div来获取两倍的高度，并启用请求的布局.

Since a flex item (here the li) can't dynamically grow both vertical and horizontal, we instead use its inner div to take twice the height, and with that enable the requested layout.

此设置结合Flexbox的order属性，现在可以非常简单地使用例如调整布局.媒体查询纵向布局(垂直堆叠)等.

This setup, combined with Flexbox's order property, will now make it very simply to adjust its layout using e.g. media query for a portrait layout (vertically stacked) etc.

请注意，要使其全部内容按其大小动态调整大小，将需要脚本或CSS网格.

Note, to make this all dynamically sized by its content, either a script or CSS Grid will be needed.

这是一篇很棒的文章，为石工提供了一些启示(以及更多解决方案):

Here is a great post shedding some light (and more solutions) on Masonry:

• 仅CSS的砌体布局，但具有元素水平排列

堆栈片段

.masonry {
  margin: 48px -2px;
  padding-left: 0;
  list-style: none;
  align-items: flex-start;
  flex-wrap: wrap;
  display: flex;
}

.masonry li {
  flex-basis: calc(100% / 3);
  height: 200px;
  display: flex;
}

.masonry li div {
  display: relative;
  flex: 1;
  margin: 2px;
  text-align: center;
  display: flex;
  background-color: #C9F4FF;
}

.masonry li:nth-child(1) div,
.masonry li:nth-child(7) div {
  display: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(200% - 4px);              /*  twice the height  */
  background-color: #FFB4FF;
}

.masonry li:nth-child(4),
.masonry li:nth-child(8) {
  flex-basis: 100%;                      /*  100% width to force wrap  */
}

.masonry li:nth-child(4) div,
.masonry li:nth-child(8) div {
  background-color: #B9EDA8;
}

.masonry li:nth-child(4) div {
  margin-left: calc((100% / 3) + 2px);   /*  pushed to left  */
}

.masonry li:nth-child(8) div {
  margin-right: calc((100% / 3) + 2px);  /*  pushed to right  */
}

<!-- masonry starts -->
<ul class="masonry">
    <li><div>&nbsp;</div></li>
    <li><div>&nbsp;</div></li>
    <li><div>&nbsp;</div></li>
    <li><div>&nbsp;</div></li>
    <li><div>&nbsp;</div></li>
    <li><div>&nbsp;</div></li>
    <li><div>&nbsp;</div></li>
    <li><div>&nbsp;</div></li>
</ul>
<!-- masonry ends -->

这篇关于如何将flexbox包裹在多行和多列上?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！