CSS的小技巧

等宽不等高布局（利用flex布局和object-fit这个属性）

section{
   display:flex;
   flex-wrap:wrap;
}
section::after{ // 为了解决最后一行因为flex-grow：1 拉伸的问题
  content: ' ';
  flex-grow: 999999999;   
}
div{
  flex-grow:1;
  margin:2px;
  background-color: grey; 
}
img{
 object-fix: cover; // 等比例缩放
 height: 200px;
 min-width:100%;
 vertifical-align:bottom;
}

object-fit几个属性的值.png

image.png

// 正方形布局

       section{
          display: flex;
          flex-wrap: wrap;
        }
        div{
            width: 200px;
            margin: 5px;
            background-color: blue;
            flex-grow: 1;
        }
        div::after{
            content: '';
            display: block;
            padding-bottom: 100%; // 这个属性就能实现正方形布局
        }