flex box在换行后保持一个间隙

18 浏览
0 Comments

flex box在换行后保持一个间隙

由于某种未知原因，在图片换行后我发现了这个间隙。

查看样本代码：[https://codepen.io/mohammad-hossein-amri/pen/NEpzro](https://codepen.io/mohammad-hossein-amri/pen/NEpzro)

但是我想要的结果应该是这样的：

我尝试了几乎所有方法，但间隙仍然存在。不知何故，这个额外的空间在图片换行后被添加进来。

html, body{
    background: #fff;
    padding:0; margin:0;
    height:100%;
}
ul#flex-container{
    list-style-type: none;
    margin:0; padding: 0;
    display: flex;
    flex-wrap: wrap;
}
ul li{
    margin:0; padding: 0;
    flex-grow: 1;
    width:250px;
    color: #fff;
    font-size: 2.2em;
    position: relative;
}
ul li img{
    width: 100%;
}
a{
    margin: 0;
    padding: 0;
}

更新：

我看到其他人将另一个与相同答案的问题标记为重复，但该问题在谷歌搜索中没有出现，因为它与flex无关。不同的症状，但相同的解决方案并不意味着问题彼此重复！

0

2 答案

0 Comments

问题出现的原因是在使用flex布局时，当元素换行时，会出现多余的间隙。解决方法是设置元素的字体大小为0，或者添加垂直对齐属性vertical-align: top;。具体的代码如下：

CSS代码：

html, body{
    background: #fff;
    padding:0; margin:0;
    height:100%;
}
ul#flex-container{
    list-style-type: none;
    margin:0; padding: 0;
    display: flex;
    flex-wrap: wrap;
}
ul li{
    margin:0; padding: 0;
    flex-grow: 1;
    width:250px;
    color: #fff;
    font-size: 0;
    position: relative;
}
ul li img{
    width: 100%;
   
}
a{
    margin: 0;
    padding: 0;
}

HTML代码：

添加vertical-align: top;的修复代码如下：

CSS代码：

ul li{
    margin:0; padding: 0;
    flex-grow: 1;
    width:250px;
    color: #fff;
    font-size: 0;
    position: relative;
    vertical-align: top;
}

文章完整内容如下：

问题：使用flex布局时，当元素换行时，会出现多余的间隙。

解决方法：添加vertical-align: top;属性修复问题。

具体的代码如下：

CSS代码：

html, body{
    background: #fff;
    padding:0; margin:0;
    height:100%;
}
ul#flex-container{
    list-style-type: none;
    margin:0; padding: 0;
    display: flex;
    flex-wrap: wrap;
}
ul li{
    margin:0; padding: 0;
    flex-grow: 1;
    width:250px;
    color: #fff;
    font-size: 0;
    position: relative;
    vertical-align: top;
}
ul li img{
    width: 100%;
   
}
a{
    margin: 0;
    padding: 0;
}

HTML代码：

0
0 Comments

flexbox布局在换行时会出现一个间隙的问题。这个问题的原因是，当flex容器中的子项在一行放不下时，会自动换行，并且每一行的子项会按照一定的规则重新排列。在这个过程中，每一行的子项之间会产生一个间隙。

为了解决这个问题，可以给每个li元素添加一个margin-bottom属性，并设置一个合适的数值，比如5px。通过这样的设置，每个li元素在显示时都会有一个底部的间距，从而使得换行后的子项之间不再出现间隙。

下面是代码的示例：

ul li {
   margin-bottom: 5px;
}

通过给li元素添加margin-bottom属性，我们成功解决了flexbox布局在换行时出现的间隙问题。这样，即使子项换行排列，每一行之间也能保持一个固定的间距。

0