flex布局

Question

 .multi-lists{
            width: 210px;
            display: flex;
            flex-wrap: wrap;
            margin-top: 10px;
        }
        .multi-lists .cell{
            border:1px solid #aaa;
            display: flex;
            justify-content: space-around;
            align-items: center;
            width: 25px;
            height: 25px;
            margin-right: -1px;
            margin-bottom: -1px;
        }
        <div class="multi-lists"><span class="cell">1</span><span class="cell">2</span><span class="cell">3</span><span class="cell">4</span><span class="cell">5</span><span class="cell">6</span><span class="cell">7</span><span class="cell">8</span><span class="cell">9</span><span class="cell">1</span><span class="cell">2</span><span class="cell">3</span><span class="cell">4</span><span class="cell">5</span><span class="cell">6</span><span class="cell">7</span><span class="cell">8</span><span class="cell">9</span><span class="cell">1</span><span class="cell">2</span><span class="cell">3</span><span class="cell">4</span><span class="cell">5</span><span class="cell">6</span><span class="cell">7</span><span class="cell">8</span><span class="cell">9</span><span class="cell">1</span><span class="cell">2</span><span class="cell">3</span><span class="cell">4</span><span class="cell">5</span><span class="cell">6</span><span class="cell">7</span><span class="cell">8</span><span class="cell">9</span><span class="cell">1</span><span class="cell">2</span><span class="cell">3</span><span class="cell">4</span><span class="cell">5</span><span class="cell">6</span><span class="cell">7</span><span class="cell">8</span><span class="cell">9</span><span class="cell">1</span><span class="cell">2</span><span class="cell">3</span><span class="cell">4</span><span class="cell">5</span><span class="cell">6</span><span class="cell">7</span><span class="cell">8</span><span class="cell">9</span><span class="cell">1</span><span class="cell">2</span><span class="cell">3</span><span class="cell">4</span><span class="cell">5</span><span class="cell">6</span><span class="cell">7</span><span class="cell">8</span><span class="cell">9</span><span class="cell">1</span><span class="cell">2</span><span class="cell">3</span><span class="cell">4</span><span class="cell">5</span><span class="cell">6</span><span class="cell">7</span><span class="cell">8</span><span class="cell">9</span><span class="cell">1</span><span class="cell">2</span><span class="cell">3</span><span class="cell">4</span><span class="cell">5</span><span class="cell">6</span><span class="cell">7</span><span class="cell">8</span><span class="cell">9</span></div>

我想要的是9*9个格子，宽度和border我都已经写死，但是不知道为什么呈现的是这个样子

Answer 1

这里有问题：.multi-lists .cell要不是flex:1这种，要不就直接写width。
.multi-lists .cell{

flex:1;
-webkit-flex:1;

}
.multi-lists .cell{
width: 25px;
}

Answer 2

将width改成21px就行了

Answer 3

.multi-lists .cell{
    border:1px solid #aaa;
    flex：0 0 11.11%;
    width: 11.11%;
    height: 25px;
    box-sizing: border-box;
}

Answer 4

.multi-lists{
            width: 234px; //210px你怎么算出来的，(25px+1px)*9=234px
            display: flex;
            flex-wrap: wrap;
            margin-top: 10px;
        }
        

width: 25px border 1px 一个格子应该是 27px(两边的border),但你margin了-1px，所以是26px(chrome下是这样算的）