flex布局图片九宫格

最新推荐文章于 2024-09-12 21:02:21 发布

原创

最新推荐文章于 2024-09-12 21:02:21 发布 · 1.2k 阅读

5 ·

CC 4.0 BY-SA版权

本文介绍了如何利用Flex布局来实现图片展示的需求，包括单张全屏、双图平分、三图一排、四图两排以及五到九图每排三张的显示效果。通过对比浮动和行内元素布局的复杂性，强调了Flex布局的简便性。推荐阅读阮一峰的Flex布局教程以加深理解。

需求：

一张图片时宽度满屏，
两张图片时各占一半，
三张图片时一行展示3张图片，
四张图片时一行展示2张图片
五张~九张时一行展示3张

我第一反应是想到：浮动，或者用行内元素。

浮动跟行内元素：功能是可以实现的，我个人觉得会比较麻烦的，要自己各种算内边距图片的占比等等，还算的边距不统一。

后面灵光一闪，怎么就没有想到用flex 布局呢！！！!（被自己蠢哭了）

推荐可以看下阮一峰 Flex 布局教程简单明了，通俗易懂，有兴趣的童鞋可以去看一下。

话不多说了，上看代码：

需求1 className：one

需求2、4 className：two

需求3、5 className：three

<div class="imgBox">
     <div :class="imgList.length === 1? 'one' : (imgList.length === 2 || imgList.length === 4)? 'two' : 'tree'"  v-for="(img,index) in imgList" :key="index">
            <div class="bgsize" v-lazy:background-image="img"></div>
     </div>
</div>

.imgBox{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .one{
      width:

最低0.47元/天解锁文章