Flexbox弹性盒布局中gap的使用

最新推荐文章于 2024-09-15 07:35:44 发布

扶苏1002

最新推荐文章于 2024-09-15 07:35:44 发布

阅读量900

点赞数 4

分类专栏： CSS2+CSS3 文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_44741577/article/details/141862872

版权

CSS2+CSS3 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

文章目录

一、gap基本使用
二、gap的属性的值
三、gap之后的边距
四、实现一行放m个，并且列间距是n

一、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;
}