如何可以使用flex布局 进行平均分布,又可以换行呢?
第一步:
设置flex容器元素样式
display: flex;
display: -webkit-flex;
justify-content: space-around;/或者space-between/
flex-direction: row;
flex-wrap: wrap;
效果:
第二步:
设每一行最多显示n个元素,向flex容器追加2*n个元素,追加的元素的样式继承flex子元素的样式,并设置每个元素的高度为0,visibility:hidden;
效果:
第三步:
若每行的元素个数不随window宽度变化而改变
设置flex容器元素宽度100%;
设置元素宽度x%,x为每一行最多显示的个数分之一,百分比;
若每行的元素个数随window宽度变化而改变
设置flex容器元素宽度100%;
设置元素宽度x%,x为每一行最多显示的个数分之一,百分比;
设置元素的max-width min-width在一个合适的范围
不完美之处:若只有一行,宽度继续增大,元素间距在变化。而我期望只有一行时,宽度足够大时,变化宽度,元素间距不变化。希望有人能提供解决方案。