flex布局元素间距设置的小技巧

flex布局特别灵活，特别是在手机端上，完全没有兼容的问题。 今天遇到一个问题，有一个4*2的布局,上面四个元素，下面也是四个，元素之间需要有1px的间距。显示的效果这个样子。

解决的小技巧

设置子元素的宽度的时候，使用 calc ， 比如这个示例中，一排一个四个元素，间距就是3px, 所以元素的宽度应该是 calc(25% - 3px/4); 。 下面给出一个完成的示例。

html

<div id="nav">
    <a href="/">森林</a>
    <a href="/">森林</a>
    <a href="/">森林</a>
    <a href="/">森林</a>
    <a href="/">森林</a>
    <a href="/">森林</a>
    <a href="/">森林</a>
</div>

css

#nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background: white;
    overflow: hidden;
}

#nav a {
    color: #fbf7f7;
    width: calc(25% - 3px/4);
    line-height: 2.5em;
    text-align: center;
    position: relative;
    background: #01c1c2;
    margin-bottom: 1px;
}

出现的问题

如果是只用用 idth:24.xx%, 要么是空间的间隙大了，要么是么有了。具体的原因是不清楚，反正使用calc这种方式可以很好的解决。

不正常的显示1
不正常的显示2