【CSS教程】——几行代码就可以搞定自适应了？

本文链接：https://blog.csdn.net/LIangell/article/details/148632049

在我们日常开发中经常会遇到卡片布局，比如展示产品、文章、照片等页面。下面给大家介绍多种布局方法。

1. 使用auto-fill

<!DOCTYPE html>
<html>

<head>
    <title>Grid Page</title>
</head>

<body>
    <div class="grid_fill">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>

</html>

<style>
    /* 父元素 */
    .grid_fill {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 5px;
    }

    /* 子元素 */
    .item {
        height: 100px;
        background-color: rgb(252, 255, 164);
        border-radius: 10px;
    }
</style>

最终得到的效果如下：

✅ 每个卡片设置最小宽度

✅ 屏幕变窄时，铺满整个屏幕，当不足以分给每个卡片最小宽度时，自动换行

✅屏幕变宽时，页面尽可能分割成更多列，右侧一定程度上会产生空白区域

1. 将div变成行内元素

<!DOCTYPE html>
<html>

<head>
    <title>Grid Page</title>
</head>

<body>
    <div class="grid">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>

</html>

<style>
    /* 父元素 */
    .grid {
    }

    /* 子元素 */
    .item {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: rgb(252, 255, 164);
        border-radius: 10px;
        margin: 5px;
    }
</style>

2. 使用flex布局

<!DOCTYPE html>
<html>

<head>
    <title>Grid Page</title>
</head>

<body>
    <div class="grid">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>

</html>

<style>
    /* 父元素 */
    .grid {
        display: flex;
        flex-wrap: wrap;
    }

    /* 子元素 */
    .item {
        flex-basis: 100px;
        flex-grow: 0;
        flex-shrink: 0;
        height: 100px;
        background-color: rgb(252, 255, 164);
        border-radius: 10px;
        margin: 5px;
    }
</style>

最终得到的效果如下：

✅ 每个卡片固定宽度
✅ 屏幕变窄时需自动换行

✅小于卡片宽度自动换行，但右侧会出现空白区域

3. 使用auto-fit

<!DOCTYPE html>
<html>

<head>
    <title>Grid Page</title>
</head>

<body>
    <div class="grid_fit">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>

</html>

<style>
    /* 父元素 */
    .grid_fit {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }
    /* 子元素 */
    .item {
        height: 100px;
        background-color: rgb(252, 255, 164);
        border-radius: 10px;
        margin: 5px;
    }
</style>

最终得到的效果如下：

✅卡片占满一整行

✅ 每个卡片设置最小宽度
✅ 屏幕变窄时，不足以分给每个卡片最小宽度时，自动换行