如何使用弹性框进行这种画廊风格的布局?
我有一个<ul>
,其中包含<li>
。第一个<li>
我希望是双倍大小,其余项目围绕它流动。
我可以使用flexbox使用以下代码布置项目,但是当我在第一项上使用双倍大小时,我无法弄清楚如何回流框以适应周围的图像。
ul, li {
padding: 0;
margin: 0;
}
ul {
display: flex;
justify-content: flex-start;
list-style-type: none;
align-items: flex-start;
flex-wrap: wrap;
flex-direction: row;
}
ul > li {
width: 15rem;
height: 15rem;
order: 2;
}
ul > li.active {
width: 30rem;
height: 30rem;
order: 1;
}
我有一些循环浏览<li>
标记的JavaScript,并添加了.active
类。使用order: 1
我可以将当前活动的图像移动到第一个点(双倍版本)。
答案 0 :(得分:-1)
我不喜欢&#39;真的知道flex,但你可以用&#39; float&#39;
来做到这一点ul, li {
padding: 0;
margin: 0;
}
ul {
}
ul > li {
width: 50px;
height: 50px;
background-color: black;
margin-right: 5px;
margin-bottom: 5px;
float: left
}
ul li:nth-child(1) {
width: calc( 50px * 2 + 5px);
height: calc( 50px * 2 + 5px);
}