[分享]css做简易相册怎么做

CSS做简易相册主要需要以下几个步骤：

1. HTML结构

 <div class="gallery">
        <img src="1.jpg">
        <img src="2.jpg">
        <img src="3.jpg">
        <img src="4.jpg">
    </div> 

2. CSS样式

 .gallery {
        display: flex;    /* 设置为弹性布局 */
        flex-wrap: wrap;  /* 自动换行 */
        justify-content: center;  /* 主轴居中 */
        gap: 10px;        /* 图片间隔 */
    }

    .gallery img {
        width: 200px;     /* 图片宽度 */
        height: 200px;    /* 图片高度 */
        object-fit: cover;  /* 图片填充方式为覆盖 */
    } 

3. 思路说明

首先，我们需要一个容器来包裹所有的图片，这个容器的样式需要设置为弹性布局，同时自动换行，并且让主轴居中，并且设置图片之间的间距。然后，每张图片的样式需要设置宽度、高度，并且让图片填充方式为覆盖。

这样，一个简易的相册就完成啦！