html表格实现图片排列布局,纯css实现朋友圈照片排列布局（附单图自适应宽高）...

效果图

image.png

image.png

image.png

image.png

image.png

思路

设置flex实现正常的三列布局

ul{

padding:0px;

width:300px;

display: flex;

/* justify-content: flex-end; //用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。 */

flex-wrap: wrap; //换行

}

每个元素占32%，除每行最后一个元素外设置右外边距为2%

li{

list-style: none;

width:32%;

height:100px;