css3自动换行排列

如果一行放不下就会自动换行

display: flex;
flex-wrap: wrap;

示例 :

html

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

css

.container {
  display: flex;
  flex-wrap: wrap; /*换行*/
  /* flex-wrap: wrap-reverse; //反方向换行 */
  align-content: flex-start; /*紧揍排列,解决换行出现空行*/
  justify-content: space-between; /*左右布局,平分间隙*/
  width: 520px;
  height: 300px;
  background-color: rgb(181, 235, 235);
}
.box {
  margin-top: 6px;
  width: 100px;
  height: 100px;
  background-color: rgb(223, 155, 155);
}

如图 :

The_End