如何将 flexbox 包装在多行和多列上? [英] How to wrap flexbox over multiple rows and columns?
问题描述
我正在尝试以砖石的形式建造一个画廊，但我无法理解包裹 flexbox 的问题?
我得到了一个简单的 UL 列表，并添加了所需的样式，但事情并没有像它应该的那样浮动和包装.
.masonry {边距:48px -2px；填充左:0;列表样式:无；对齐项目:flex-start；弹性方向:行；flex-wrap: 包裹;显示:弹性；}.masonry li {高度:300px；flex-basis: calc(33.33% - 4px);边距:2px；文本对齐:居中；显示:弹性；背景色:#C9F4FF；}.masonry li:nth-child(1), .masonry li:nth-child(7) {高度:604px；背景色:#FFB4FF；}.masonry li:nth-child(4), .masonry li:nth-child(4) {flex-basis: calc(66.66% - 4px);背景色:#B9EDA8；}<!-- 砌体开始--><ul class="masonry"><li> </li><li> </li><li> </li><li> </li><li> </li><li> </li><li> </li><li> </li><!-- 砌体结束-->结果看起来像这样，有点有趣:)
也许有人知道如何编写正确的 CSS 来使内容正确包装?
Flexbox 不能用它自己的布局功能来做到这一点，它需要一些帮助，所以这里有一个 CSS 解决方案，假设项目的大小是给定的.
这里的主要技巧是在 li 内添加一个额外的元素并使其成为样式"元素，并使用 li 作为主要布局.>
浅绿色"项目有一个左/右边缘，相应地推动它们，并为浅紫色"腾出空间.
因为一个 flex 项目(这里是 li)不能动态地垂直和水平增长，我们改为使用它的内部 div 来获得两倍的高度，并用启用请求的布局.
这个设置，结合 Flexbox 的 order 属性，现在可以非常简单地使用例如纵向布局(垂直堆叠)等的媒体查询
请注意，要根据内容动态调整大小，需要脚本或 CSS 网格.
这是一篇很好的帖子，阐明了砌体的一些亮点(和更多解决方案):
<小时>堆栈片段
.masonry {边距:48px -2px；填充左:0;列表样式:无；对齐项目:flex-start；flex-wrap: 包裹;显示:弹性；}.masonry li {flex-basis: calc(100%/3);高度:200px；显示:弹性；}.masonry li div {显示:相对；弹性:1；边距:2px；文本对齐:居中；显示:弹性；背景色:#C9F4FF；}.masonry li:nth-child(1) div,.masonry li:nth-child(7) div {显示:绝对；左:0；顶部:0；宽度:100%；高度:计算(200% - 4px)；/* 高度的两倍 */背景色:#FFB4FF；}.masonry li:nth-child(4),.masonry li:nth-child(8) {弹性基础:100%；/* 100% 宽度强制换行 */}.masonry li:nth-child(4) div,.masonry li:nth-child(8) div {背景色:#B9EDA8；}.masonry li:nth-child(4) div {margin-left: calc((100%/3) + 2px);/* 向左推 */}.masonry li:nth-child(8) div {右边距:calc((100%/3) + 2px);/* 向右推 */}<!-- 砌体开始--><ul class="masonry"><li><div> </div></li><li><div> </div></li><li><div> </div></li><li><div> </div></li><li><div> </div></li><li><div> </div></li><li><div> </div></li><li><div> </div></li><!-- 砌体结束-->I'm trying to build a gallery in form of a masonry, but I can't get my head around wrapping of flexboxes?
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> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
<!-- masonry ends -->
The result looks like this, which is kinda funny :)
Maybe someone knows how to write the correct CSS to make things wrap correctly?
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.
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".
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.
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.
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:
Stack snippet
.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> </div></li>
<li><div> </div></li>
<li><div> </div></li>
<li><div> </div></li>
<li><div> </div></li>
<li><div> </div></li>
<li><div> </div></li>
<li><div> </div></li>
</ul>
<!-- masonry ends -->
这篇关于如何将 flexbox 包装在多行和多列上?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
