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 不正常的显示1
不正常的显示2 不正常的显示1

一条评论

回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注