css3自动换行排列

2024-10-19 14:45:53

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

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

最新文章

热门文章