Flex布局公式：确定布局行数和间距

面试官：请使用flex布局实现3 * 3展示div，且每个div上下左右间距为12px

1. 布局div

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

2. css样式

2.1 父级box

#box {
    display: flex; /*开启弹性盒模型*/
    flex-flow: row wrap; /*横向排列、换行*/
    /*gap是缩写，全称：row-gap & column-gap */
    gap: 12px; /*盒子内层间距：盒与盒之间的的row、column间距*/
    padding: 12px; /* 盒子外层间距*/
    box-sizing: border-box; /*开启，方便布局*/
    border: 1px solid red;
}

2.2 子元素item

计算公式：每一行放m个, 间距为gap calc((100% - (m - 1) * gap) / m)

/* 每行放3个，间距为12px */
div.item {
    width: calc((100% - (3 - 1) * 12px) / 3);
}

.item1 {
    height: 100px;
    background-color: red;
}

.item2 {
    height: 100px;
    background-color: green;
}

.item3 {
    height: 100px;
    background-color: yellow;
}

.item4 {
    height: 100px;
    background-color: blue;
}