How to set element spacing in CSS flex wrap layout

In the CSS flex wrap layout, there is no property to directly set the spacing. By default, the child elements will be arranged closely together.

The following is an ordinary flex layout code:

.box {
    width: 414px;
    height: 736px;
    margin: 0 auto;
    border: 1px solid blue;
}
.flex {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid red;
}
.item {
    display: block;
    padding: 4px 10px;
    color: white;
    background-color: #5454dd;
    border-radius: 3px;
}

The display effect is as follows:

flex-wrap-spacing

Since no spacing is set, the elements are all next to each other. Now let’s add the left and top spacing:

.item {
    margin: 8px 0 0 8px;
}

The elements are separated, but the starting position of the layout has also changed. If we want to keep the starting position unchanged, we also need to add the following settings to the container:

.flex {
    margin: -8px 0 0 -8px;
}

When setting the margin, we need to avoid the problem of merging the margins, otherwise the layout of the parent container will be changed. The solution is simple, as long as the parent container has a border, it can also be a transparent border:

.box {
    border: 0 solid transparent;
}

At last, here is an example of how to set element spacing in CSS flex layout.

<html>
<head>
    <style type="text/css">
        *,
        :after,
        :before {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        }
        .nav {
            width: 414px;
            height: 64px;
            margin: 0 auto;
            border: 0 solid transparent;
        }
        .box {
            width: 414px;
            height: 736px;
            margin: 0 auto;
            border: 1px solid blue;
        }
        .flex {
            display: flex;
            flex-wrap: wrap;
            border: 1px solid red;
        }
        .item {
            display: block;
            padding: 4px 10px;
            color: white;
            background-color: #5454dd;
            border-radius: 3px;
        }
        .flex {
            margin: -8px 0 0 -8px;
        }
        .item {
            margin: 8px 0 0 8px;
        }
    </style>
</head>
<div class="nav"></div>
<div class="box">
    <div class="flex">
        <span class="item">item</span>
        <span class="item">item</span>
        <span class="item">item</span>
        <span class="item">item</span>
        <span class="item">item</span>
        <span class="item">item</span>
        <span class="item">item</span>
        <span class="item">item</span>
        <span class="item">item</span>
        <span class="item">item</span>
        <span class="item">item</span>
        <span class="item">item</span>
        <span class="item">item</span>
        <span class="item">item</span>
        <span class="item">item</span>
        <span class="item">item</span>
        <span class="item">item</span>
        <span class="item">item</span>
        <span class="item">item</span>
        <span class="item">item</span>
        <span class="item">item</span>
        <span class="item">item</span>
        <span class="item">item</span>
        <span class="item">item</span>
    </div>
</div>
<body>
</body>
</html>
RSS