flex布局 一行显示两个同宽、高的盒子 并 可以换行

我在写移动端的项目时,会碰到类似如下布局,每行两个元素,每列就几乎无限制的,进行加载

在设置一个商品盒子的宽度时,无法设置固定宽度,因为不同设备宽度不一样,会导致屏幕 出现不同大小的留白,所以我需要通过flex设置弹性布局。

 

代码思路

1. 父元素设置flex布局,宽度100% ,并允许换行

2. 子元素通过 min-width规定,最小宽度,这样盒子就不能一直弹性的缩小下去了,就会产生换行的效果

代码实现如下





    
    
    
    Document
    



    
    

你可能感兴趣的:(HTML,和CSS,css,html,css3)