如何使用 flex 创建自定义马赛克 [英] How to create a custom mosaic with flex
问题描述
我正在尝试使用 flex 创建一个自定义马赛克,如下所示:
除了框 4 的高度和宽度加倍外,所有框的宽度都是父容器的三分之一.
我设法达到以下条件:
#push-group-element ul,#push-group-element ul li{列表样式类型:无;边距:0;填充:0;显示:弹性;弹性:1 0 33.33%;对齐内容:居中;}.mosaic-容器{显示:弹性;宽度:100%;高度:100%;溢出:隐藏;列表样式类型:无;背景:红色;flex-wrap: 包裹;}.mosaic-item {位置:相对;填充:10px;背景:绿色;轮廓:1px纯黑色;}.mosaic-item {高度:150px;}#push-group-element .mosaic-item:nth-child(4) {弹性:1 0 66.6%;高度:300px;}
<ul class="mosaic-container"><li class="mosaic-item item-small" data-item="1">1</li><li class="mosaic-item item-small" data-item="2">2</li><li class="mosaic-item item-small" data-item="3">3</li><li class="mosaic-item item-big" data-item="4">4</li><li class="mosaic-item item-small" data-item="5">5</li><li class="mosaic-item item-small" data-item="6">6</li><li class="mosaic-item item-small" data-item="7">7</li><li class="mosaic-item item-small" data-item="8">8</li><li class="mosaic-item item-small" data-item="8">9</li>
我的问题是第 6 号框没有换行并落到下一行,因此创建了一个新的不需要的行,其中包含框 9 和一个空心空间,6 应该是.
总结一下:根据我附上的草图,我如何使盒子 6 包裹在数字 5 和 7 8 9 以下的同一行中.提前谢谢你
添加如下所示的 span 元素:
#push-group-element ul,#push-group-element ul li {列表样式类型:无;边距:0;填充:0;显示:弹性;弹性:1 0 33.33%;对齐内容:居中;}.mosaic-容器{显示:弹性;宽度:100%;高度:100%;溢出:隐藏;列表样式类型:无;背景:红色;flex-wrap: 包裹;}.mosaic-item {位置:相对;填充:10px;背景:绿色;轮廓:1px纯黑色;}.mosaic-item {高度:150px;}#push-group-element .mosaic-item:nth-child(4) {弹性:1 0 66.6%;高度:300px;}
<ul class="mosaic-container"><li class="mosaic-item item-small" data-item="1">1</li><li class="mosaic-item item-small" data-item="2">2</li><li class="mosaic-item item-small" data-item="3">3</li><li class="mosaic-item item-big" data-item="4">4</li><span style="width: 33.3%;"><li class="mosaic-item item-small" data-item="5">5</li><li class="mosaic-item item-small" data-item="6">6</li></span><li class="mosaic-item item-small" data-item="7">7</li><li class="mosaic-item item-small" data-item="8">8</li><li class="mosaic-item item-small" data-item="8">9</li>
或使用 float 属性代替 flex 的类似结果(无需更改 HTML 结构).
#push-group-element ul,#push-group-element ul li {列表样式类型:无;边距:0;填充:0;对齐内容:居中;宽度:33.3%;向左飘浮;}#push-group-element ul {宽度:100%;}.mosaic-容器{宽度:100%;高度:100%;溢出:隐藏;列表样式类型:无;背景:红色;}.mosaic-item {位置:相对;填充:10px;背景:绿色;轮廓:1px纯黑色;}.mosaic-item {高度:150px;}#push-group-element .mosaic-item:nth-child(4) {宽度:66.6%;高度:300px;}
<ul class="mosaic-container"><li class="mosaic-item item-small" data-item="1">1</li><li class="mosaic-item item-small" data-item="2">2</li><li class="mosaic-item item-small" data-item="3">3</li><li class="mosaic-item item-big" data-item="4">4</li><li class="mosaic-item item-small" data-item="5">5</li><li class="mosaic-item item-small" data-item="6">6</li><li class="mosaic-item item-small" data-item="7">7</li><li class="mosaic-item item-small" data-item="8">8</li><li class="mosaic-item item-small" data-item="8">9</li>
I am trying to create a custom mosaic with flex that would look like this:
All the boxes have a width of third of the parent container except box 4 that is doubled in height and width.
I managed to get to the following condition:
#push-group-element ul,
#push-group-element ul li{
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
flex: 1 0 33.33%;
justify-content: center;
}
.mosaic-container {
display: flex;
width: 100%;
height: 100%;
overflow: hidden;
list-style-type: none;
background: red;
flex-wrap: wrap;
}
.mosaic-item {
position: relative;
padding: 10px;
background: green;
outline: 1px solid black;
}
.mosaic-item {
height: 150px;
}
#push-group-element .mosaic-item:nth-child(4) {
flex: 1 0 66.6%;
height: 300px;
}
<div id="push-group-element" style="width:600px">
<ul class="mosaic-container">
<li class="mosaic-item item-small" data-item="1">1</li>
<li class="mosaic-item item-small" data-item="2">2</li>
<li class="mosaic-item item-small" data-item="3">3</li>
<li class="mosaic-item item-big" data-item="4">4</li>
<li class="mosaic-item item-small" data-item="5">5</li>
<li class="mosaic-item item-small" data-item="6">6</li>
<li class="mosaic-item item-small" data-item="7">7</li>
<li class="mosaic-item item-small" data-item="8">8</li>
<li class="mosaic-item item-small" data-item="8">9</li>
</ul>
</div>
My problem is that box number 6 is not wrapping and falls to the next line, thus creating a new unwanted row with box 9 and a hollow space where 6 is supposed to be.
To sum it up: How do I make box 6 wrap below number 5 and 7 8 9 are in the same row according to the sketch I attached. thankyou in advance
Add a span element like shown below:
#push-group-element ul,
#push-group-element ul li {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
flex: 1 0 33.33%;
justify-content: center;
}
.mosaic-container {
display: flex;
width: 100%;
height: 100%;
overflow: hidden;
list-style-type: none;
background: red;
flex-wrap: wrap;
}
.mosaic-item {
position: relative;
padding: 10px;
background: green;
outline: 1px solid black;
}
.mosaic-item {
height: 150px;
}
#push-group-element .mosaic-item:nth-child(4) {
flex: 1 0 66.6%;
height: 300px;
}
<div id="push-group-element" style="width:600px">
<ul class="mosaic-container">
<li class="mosaic-item item-small" data-item="1">1</li>
<li class="mosaic-item item-small" data-item="2">2</li>
<li class="mosaic-item item-small" data-item="3">3</li>
<li class="mosaic-item item-big" data-item="4">4</li>
<span style="width: 33.3%;">
<li class="mosaic-item item-small" data-item="5">5</li>
<li class="mosaic-item item-small" data-item="6">6</li>
</span>
<li class="mosaic-item item-small" data-item="7">7</li>
<li class="mosaic-item item-small" data-item="8">8</li>
<li class="mosaic-item item-small" data-item="8">9</li>
</ul>
</div>
OR Similar result using float property instead of flex(no need of changing HTML strucutre).
#push-group-element ul,
#push-group-element ul li {
list-style-type: none;
margin: 0;
padding: 0;
justify-content: center;
width: 33.3%;
float: left;
}
#push-group-element ul {
width: 100%;
}
.mosaic-container {
width: 100%;
height: 100%;
overflow: hidden;
list-style-type: none;
background: red;
}
.mosaic-item {
position: relative;
padding: 10px;
background: green;
outline: 1px solid black;
}
.mosaic-item {
height: 150px;
}
#push-group-element .mosaic-item:nth-child(4) {
width: 66.6%;
height: 300px;
}
<div id="push-group-element" style="width:600px">
<ul class="mosaic-container">
<li class="mosaic-item item-small" data-item="1">1</li>
<li class="mosaic-item item-small" data-item="2">2</li>
<li class="mosaic-item item-small" data-item="3">3</li>
<li class="mosaic-item item-big" data-item="4">4</li>
<li class="mosaic-item item-small" data-item="5">5</li>
<li class="mosaic-item item-small" data-item="6">6</li>
<li class="mosaic-item item-small" data-item="7">7</li>
<li class="mosaic-item item-small" data-item="8">8</li>
<li class="mosaic-item item-small" data-item="8">9</li>
</ul>
</div>
这篇关于如何使用 flex 创建自定义马赛克的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!