flex实现三列排序

Author：逸云先生
发布时间：March 23, 2020
2910 views
4 comments
979 words
Categories： Web开发 flex布局

html部分：

```css
<div id="box">
    <div class="box">
        <div class="item item1"></div>
        <div class="item item2"></div>
        <div class="item item3"></div>
        <div class="item item1"></div>
        <div class="item item2"></div>
        <div class="item item3"></div>
        <div class="item item1"></div>
        <div class="item item2"></div>
        <div class="item item3"></div>
        <div class="item item3"></div>
    </div>

</div>
```

css部分：

```css
* {
        margin: 0;
        padding: 0;
    }

#box {
        width: 100%;
        height: 100%;
        top: 0;
        z-index: -1;
        position: absolute;
        background: black;
        background-size: 100% 100%;
    }

.box {
        margin: 40px 0;
        display: flex;
        width: 100%;
        flex: 1;
        flex-wrap: wrap;
        justify-self: start;
    }

.item {
        width: 32%;
        height: 100px;
        border: 1px solid #ccc;
        box-shadow: 0 0 8px #ccc;
        display: flex;
        flex-direction: column;
        margin: 10px auto;

}

.item1 {
        background-color: red;
    }

.item2 {
        background-color: blue;
    }

.item3 {
        background-color: purple;
    }
```

Last modification：September 4, 2023