画廊样式布局与css flex-box？

Question

如何使用flex box进行这种画廊风格的布局？

我有一台装有<li>的<ul>。第一个<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>标记并添加.active类的javascript。使用order: 1，我可以将当前活动的图像移动到第一个点(双倍大小的版本)。

Answer 1

我对flex不是很了解，但是你可以用'float‘来做到这一点

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);
}

https://jsfiddle.net/vcqp8an6/