Question

我正在构建一个页面，其中有8个项目使用flexbox容器分布在两行中。每件物品宽25％，高50％。因为它是一个水平滚动页面，我使用px而不是％（值是根据屏幕大小由javascript生成的）。对于这个例子，我使用1440px的屏幕尺寸。

现在，当我点击其中一个项目时，它必须一直开始，变为两倍宽，两倍高。

目前看起来像这样（请忽略模糊的图像）： Initial state

使项目更宽是没有问题的（使用flex-basis：720px），但是当我将第一个项目设置得更高（高度为100％）时，之前在第二行上的项目将不再可见。相反，由于第一张图片，它们被推下：State when I make the first item bigger

我真正想要的是较小的物品均匀分布在较大的物品旁边。这可能吗？

这是我的HTML标记（它包含web2py语法，但总共有8个项目）：

<div class="scrollable">
  <div class="flexcontainer">
     {{for s in stages:}}
        <div class="flexitem">
           <img src="{{=URL('default', 'download', args=s.image)}}" class="stage-img">
       </div>
     {{pass}}
  </div>
</div>

这是我的CSS：

.flexcontainer {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    height: 100%;
    width: 3000px; /* Hardcoded width for testing purposes */
}

.flexcontainer .flexitem {
    flex: 1;
    flex-basis: 360px;
    height: 50%;
}

.flexcontainer .flexitem img {
    width: 100%;
    height: 100%;
}

/* Style for the active/clicked item */
.flexcontainer .flexitem.active {
    flex-basis: 720px;
    height: 100%;
}

Flexbox：如何使一个项目高于其他项目？

0 个答案: