css 平均分布自动换行_grid布局自动换行

一、flex + margin

<div class="flex">
  <div
    v-for="item in 21"
    :key="item"
    class="item"
  >
    {{ item }}
  </div>
</div>

.flex {
  display: flex;
  width: 800px;
  flex-wrap: wrap;
}
.item {
  --n: 10; // 每行要放多少的item
  --gap: calc((100% - 50px * var(--n)) / var(--n) / 2); // 算出具体的margin值 50px是当前item的宽度， （整体宽度 - 子集盒子的宽度 * 每行的个数 ）/ 每行的个数 / 2
  margin: 10px var(--gap);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

二、grid 布局

	<div class="flex">
	 <div
	   v-for="item in 21"
	   :key="item"
	   class="item"
	 >
	   {{ item }}
	 </div>
	</div>
	.flex {
		display: grid;
		//第一个属性：行与行间隔，第二个属性列与列间隔
		grid-gap:20px 20px;
		//内容整体平均分布
		justify-content: space-between;
		//单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充
		grid-template-columns: repeat(auto-fill, 200px); // 200px为item的宽度
	}
	.flex>.item {
		width: 200px
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

CSS基本布局——grid布局