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: 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

html flex布局换行,flex布局换行后间隙问题相关推荐

（转）flex布局换行后间隙问题
问题描述今天遇到flex布局换行后产生间隙的问题,本来预期得到以下结果 pre.PNG 具体实现如下: <!DOCTYPE html> <html lang="en&qu ...
flex 单独一行_Flex布局从了解到使用只需5min
作者:沸羊羊_ https://blog.csdn.net/weixin_42653522/article/details/106940004 Flex简介页面布局的传统解决方案是基于盒状模型,使用 ...
flex 平铺布局_CSS3 Flex布局（伸缩布局盒模型）学习
CSS3 Flex布局(伸缩布局盒模型)学习转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...
flex 下对齐_Flex 布局教程：语法篇
作者: 阮一峰日期: 2015年7月10日网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + floa ...
CSS3 Flex布局（伸缩布局盒模型）学习
CSS3 Flex布局(伸缩布局盒模型)学习转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...
第103天：CSS3中Flex布局（伸缩布局）详解
一.Flex布局 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. .box{display: ...
flex 左右布局_web前端学习：移动端开发常用布局—前端弹性布局总结
各位已经入坑的前端小伙伴,前面咱们已经给大家分享了移动端开发时候流式布局的应用场景及注意事项,今天再次给大家分享一个布局叫弹性布局,接下来咱们从如下几个方面,全方位的给大家介绍弹性布局的使用. 一:什 ...
flex布局单独一行_CSS3 Flex布局（伸缩布局盒模型）
CSS3引入了一种新的布局模式--Flexbox布局,即伸缩布局盒(Flexible Box)模型,此布局对于设计比较复杂的页面非常有用,特别是"垂直居中"布局,非常容易实现. 一 ...
flex 解析 html5,Flex布局详解
传统的布局解决方案,在处理一些特殊的布局方式时,非常繁琐,比如垂直居中实现起来就很不方便.而Flex在布局方面能给开发者带来极大的便利. Flex,Flexible Box的缩写,意为:弹性布局. 任 ...

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

html flex布局换行,flex布局换行后间隙问题相关推荐

最新文章

热门文章