flexbox布局-根据图片确定元素高度（类似瀑布流布局）

最新推荐文章于 2024-11-07 11:05:32 发布

原创最新推荐文章于 2024-11-07 11:05:32 发布 · 842 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html5 #css3

css 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用CSS Flexbox布局来实现一个动态调整元素高度的效果，特别是当元素内包含图片时，元素的高度将根据图片的最大高度进行自适应。这种布局类似于瀑布流，每行的图片区域高度由最高图片决定，而较矮的图片会在其区域内垂直居中。通过两层display: flex的嵌套应用，可以有效地实现这一需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先确定一下需求：多个元素，每个元素里有图片和一些文字等。每一行的图片区域高度根据最高图片决定，不够高的图片垂直居中
可以看下图中第一行图片较高，第二行图片较矮在这里插入图片描述
以上可通过多嵌套两层display：flex实现

先上代码结构

<ul class="parent">
   <li>
       <div class="img">
           <img src="./image/cat1.jpg" alt="">
       </div>
       <p class="price">like price</p>
   </li>
   <li>
       <div class="img">
           <img src="./image/cat2.jpeg" alt="">
       </div>
       <p class="price">like price</p>
   </li>
   。 
   。
   。
</ul>

解析都写里边了

/* 列表父元素ul设置flex，子元素的align-items默认为stretch，即跟最高的元素等高 */
.box ul {
    display: flex;
    flex-wrap: wrap;
}
/* li设置纵向排列，子元素压缩不换行 */
.box ul li {
    display: flex;
    flex-direction: column;
}

/* 图片区域占余下的所有高度，并水平垂直居中 */
.box ul li .img {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.box ul li img {
    width: 100%;
    /* 建议设置最小宽度，以防图片加载失败样式错乱 */
    min-height: 180px;
}
``


[全部代码在此，点击查看](https://github.com/WinnieWei0/flexbox-waterfall)