Flexbox弹性盒布局中gap的使用

一、gap基本使用

在CSS Grid Layout（网格布局）和Flexbox（弹性盒布局）中，gap 是一个缩写属性，用于同时设置行间隙和列间隙，如果需要分开设置，row-gap用于单独设置行间隙，column-gap用于单独设置列间隙

.container {
  width: 600px;
  background-color: red;
  display: flex;
  /* 允许flex项换行 */
  flex-wrap: wrap; 
  /* 同时设置主轴和交叉轴上的间隙为10px */
  gap: 10px; 
  /* 或者更具体地 */
  /* row-gap: 10px; */
  /* column-gap: 15px; */
}
.box {
  width: 100px;
  height: 100px;
  background-color: aqua;
}

<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 class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

二、gap的属性的值

gap 属性的值可以 px、em、vw、%等可接受的合法值

值的注意的是： 如果使用了百分比，则row-gap参考父元素的高度，则column-gap参考父元素的宽度，如果父元素的宽、高由内容撑开，则百分比则失效

.container {
  width: 600px;
  background-color: red;
  display: flex;
  /* 多行排列在顶端 */
  align-content: flex-start;
  /* 允许flex项换行 */
  flex-wrap: wrap;
  column-gap: 10px;
  /* 父元素高度由内容撑开，row-gap给百分比无效 */
  row-gap: 20%;
}

三、gap之后的边距

gap之后，间距都是在item之间、item的两边并没有边距，这一点很重重要

四、实现一行放m个，并且列间距是n

设置子元素的宽度为calc((100% - (m - 1) * npx) / m)

• 示例：一行5个，并且间距是20px

.container {
  width: 600px;
  background-color: red;
  display: flex;
  /* 多行排列在顶端 */
  align-content: flex-start;
  /* 允许flex项换行 */
  flex-wrap: wrap;
  column-gap: 20px;
  row-gap: 20px;
}
.box {
  /* 一行放5个，并且间距是20px */
  /* calc((100% - (m - 1) * npx) / m) */
  width: calc((100% - (5 - 1) * 20px) / 5);
  height: 100px;
  background-color: aqua;
}