前端：布局（用于div中有多行元素，一行只显示四个，最左或最右要紧贴父div，最顶层和最底层也要紧贴父div）

news2024/11/26 22:30:10

效果

一、flex实现

html

<!DOCTYPE html>
<html>
    <head>
        <title>Flexbox Layout</title>
        <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 10px;
            border: 1px solid red;
        }

        .box {
            flex: 1 0 calc(25% - 10px);
            height: 100px;
            background-color: #ccc;
            border: 1px solid black;
        }

        .box:first-child,
        .box:last-child {
            flex-grow: 0;
        }
    </style>
    </head>
    <body>
        <div class="container">
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
        </div>
    </body>
</html>

上述代码使用了display: flex将父级容器.container设置为Flex容器，并使用flex-wrap: wrap使子元素在容器宽度不足时换行。justify-content: space-between将子元素在主轴上均匀分布，并保持首尾子元素与父容器之间的距离。

每个子元素.box使用flex: 1 0 calc(25% - 10px)来平均占据父容器的宽度，并且通过calc()函数来减去间隙的宽度。你可以根据自己的需求调整.box元素的高度、背景颜色和边框样式。

.box:first-child和.box:last-child分别选择第一个和最后一个子元素，使用flex-grow: 0来防止它们在主轴上拉伸。

通过调整容器和子元素的样式，你可以实现具有两行、四个子元素的Flexbox布局，同时满足你的要求：首尾子元素与父容器挨着，中间子元素有一定的距离，并且首层和底层以及行与行之间都有间隙。

二、grid实现

html

<!DOCTYPE html>
<html>
    <head>
        <title>CSS Grid Layout</title>
        <style>
        .container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-gap: 10px;
            border: 1px solid red;
        }

        .box {
            height: 100px;
            background-color: #ccc;
            border: 1px solid black;
        }
    </style>
    </head>
    <body>
        <div class="container">
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
        </div>
    </body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1393235.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！