html flex布局换行,flex布局换行后间隙问题

问题描述

今天遇到flex布局换行后产生间隙的问题，本来预期得到以下结果

pre.PNG

具体实现如下：

flex布局换行后间隙问题

html,body{

width: 100%;

height: 100%;

display: flex;

justify-content: center;

align-items: center;

}

.content {

width: 380px;

height: 200px;

border: 1px solid #D54040;

border-radius: 4px;

box-sizing: border-box;

padding: 4px 0;

display: flex;

flex-wrap: wrap;

}

.name {

width: 58px;

height: 22px;

border: 1px solid #0000ff;

background: rgba(0, 0, 255, 0.15);

margin-left: 10px;

margin-top: 10px;

line-height: 22px;

text-align: center;

}

张三

李四

王五

赵六

孙七

周八

郑十一

张三

李四

得到如下结果：

act.PNG

解决方法

其实解决方法很简单，只需要在父元素这里是class为content的元素上加入

align-content: flex-start;

分析

出现该问题主要是因为在css学习过程中对于弹性盒子布局，对于align-content属性的强调相较于其他属性比较弱。align-content属性的默认值为stretch，所以会有第二行伸展的情况产生，具体align-content用法可以去看官方文档，这里不赘述。

针对该实例对align-content属性进行简单实践

align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

align-content: center;

center.PNG

align-content: flex-end;

flex-end.PNG

align-content: space-between;

space-between.PNG

align-content: space-around;

space-around.PNG

希望最短时间解决大家问题

最后编辑 20200701 aishishaqima