flex-warp换行后之间的间隔调整

flex-warp换行后之间的间隔调整

没加align-content属性之前的代码是这样的：

.branchWorkshop ul{
  display: flex;
  width: 90%;
  height: 100%;
  margin:0;
  padding:0;
  flex-wrap: wrap;
  /* ul盒子里面的内容水平居中 */
  margin:0 auto;
}

效果是这样的：

总结：没加align-content之前，元素在换行之后，剩余空间被所有行平分，各行将会伸展以占用剩余的空间。

加align-content属性之后的代码是这样的：

.branchWorkshop ul{
  display: flex;
  width: 90%;
  height: 100%;
  margin:0;
  padding:0;
  flex-wrap: wrap;
  /* ul盒子里面的内容水平居中 */
  margin:0 auto;
  align-content: flex-start;
}

效果是这样的：

总结：加align-content之后，可以根据所需来自由调整各行之间的间距，所以，flex-wrap一般情况下和align-content一起用