flex布局+自动换行

效果图：

代码：

<div class="newRightPeople"><div class="peopleCard" v-for="(i,index) in item4[selectTypeIndex].list"><div class="cardImg"><img :src="i.src"/></div><div class="cardInfo"><div class="cardIdentity"><span class="cardName">{{i.name}}</span><span class="cardPost">{{i.post}}</span></div><div class="cardDuty">{{i.duty}}</div></div></div>
</div>

js代码：

item4:[{title:"BPM",list:[{"src":'img/集团报销单.png',name:"王凯",post:"软件工程师",duty:"负责范围BPM系统开发"},{"src":'img/集团报销单.png',name:"王凯",post:"软件工程师",duty:"负责范围BPM系统开发"},{"src":'img/集团报销单.png',name:"王凯",post:"软件工程师",duty:"负责范围BPM系统开发"},{"src":'img/集团报销单.png',name:"王凯",post:"软件工程师",duty:"负责范围BPM系统开发"},]}]

CSS代码：

.newRightPeople{display: flex;flex-wrap: wrap;/*换行*/
}
.peopleCard{width: 19.0625rem;height: 5rem;background: #FFFFFF;box-shadow: 0px 2px 5px 0px rgba(0, 12, 98, 0.1);border-radius: 5px;margin-left: 1.875rem;margin-top: 1.25rem;display: flex;
}
.peopleCard:hover .cardAsk{background-color: #457BF7;
}
.cardImg{width:50px;height: 50px;margin-left:1.25rem;margin-top:0.9375rem;
}
.cardInfo{width: 12.5rem;margin-top: 1.25rem;margin-bottom: 1.25rem;
}
.cardIdentity{display: flex;
}
.cardName{text-align: left;font-size: 17px;font-family: Source Han Sans CN;font-weight: 400;color: #444444;
}
.cardPost{height: 18px;background: #FFFFFF;border: 1px solid #457BF7;border-radius: 3px;margin-left: 10px;font-size: 15px;font-family: Source Han Sans CN;font-weight: 400;color: #457BF7;
}
.cardDuty{font-size: 16px;font-family: Source Han Sans CN;font-weight: 400;color: rgba(0, 0, 0, 0.45);text-align: left;
}

flex布局+自动换行相关推荐

flex布局自动换行并解决最后一行对齐
flex布局自动换行并解决最后一行对齐实现效果: html代码(父级容器里面有5个子级盒子) css实现对齐效果: .flex-wrp {display: flex;justify-content: ...
flex布局自动换行
如何让flex布局让超出宽度的子元素自动换行? 父级div设置了display:flex,子元素的总宽度超过父元素的宽度之后,所有子元素的width都失效了,变成了平分父元素的宽度(类似flex=1) ...
css flex布局自动换行
js display: flex; flex-flow: wrap display:flex 是弹性盒布局,flex-flow是盒子属性 flex-flow 属性是 flex-direction 和 ...
解决 flex布局之 flex-wrap:wrap 自动换行属性，导致上下两行div中间有空行的问题
这两天写了一个页面发现 flex布局自动换行属性导致上下两行div中间有空行,下面先说现象. 这是中间有空行的现象导致整个页面看起来很难受 ... 通过加了一个属性 align-content ...
flex 布局列表自动换行
flex 布局列表自动换行 <!DOCTYPE html> <html> <head></head> <meta charset="ut ...
flex布局常用布局方式（一行显示固定个数，自动换行显示）
一行显示固定个数,自动换行显示基于uni-app实现一行显示固定个数的元素,元素可以遍历生成的,并且自动换行显示,效果如下图所示代码实现: <template><view cla ...
『解疑』flex布局 flex-wrap:wrap 自动换行属性，导致两行div中间有大空行。
问题 flex布局,用了flex-wrap:wrap;自动换行属性后,导致两行div中间有空行.(如下图所示) 解决给外层父元素添加 align-content:flex-start 样式解决后: ...
使用flex 布局时，英文不自动换行
问题场景: 在使用 flex 布局时,当内容超出宽度时的换行问题问题描述: flex 布局时,内容超过盒子宽度时,当内容为中文时会自动换行显示,而内容是一串英文字符或者数字时,就不会自动换行显示,如 ...
html flex自动换行,css flex布局超长自动换行的示例代码
要创建一个 flex 容器,只需要将一个 display: flex 属性添加到一个元素上. 默认情况下,所有的直接子元素都被认为是 flex 项,并从左到右依次排列在一行中. 如果 flex 项的宽 ...

flex布局+自动换行

flex布局+自动换行相关推荐

最新文章

热门文章