【CSS】间隔 gap 属性（适用于网格、弹性、多列布局）

一颗不甘坠落的流星

于 2024-04-19 16:11:20 发布

阅读量1.1k

点赞数 4

分类专栏： CSS 笔记文章标签： css 前端 row-gap column-gap gap

本文链接：https://blog.csdn.net/qq_45677671/article/details/137968537

版权

CSS 笔记专栏收录该内容

22 篇文章 1 订阅

订阅专栏

文章目录

语法：gap 属性定义 flexbox、网格或多列布局中行与列之间的间隙大小

#grid-container {
  display: grid;
  gap: 50px;
}
/* 等价于 */
#grid-container {
  display: grid;
  gap: 50px 50px;
}
/* 等价于 */
#grid-container {
  display: grid;
  row-gap: 50px;
  column-gap: 50px;
}

一、在弹性布局中使用

<!DOCTYPE html>
<html>
<head>
<style>
#flex-container {
  border: 1px solid black;
  background-color: rgb(255, 230, 251);
  display: flex;
  flex-wrap: wrap;
  gap: 20px 70px;
}
#flex-container > div {
  border: 1px solid black;
  width: 10%;
  aspect-ratio: 2;
  padding: 10px;
  background-color: lightgreen;
}
</style>
</head>
<body>
<div id="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>  
  <div>8</div>  
  <div>9</div>  
  <div>10</div>  
  <div>11</div>  
  <div>12</div>  
  <div>13</div>  
</div>

</body>
</html>

在这里插入图片描述

二、在网格布局中使用

<!DOCTYPE html>
<html>
<head>
<style>
#grid-container {
  border: 1px solid black;
  background-color: mintcream;
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 20px 50px;
}

#grid-container > div {
  border: 1px solid black;
  background-color: yellow;
}
</style>
</head>
<body>
<div id="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>  
  <div>8</div>  
</div>

</body>
</html>

在这里插入图片描述

三、在多列布局中使用

<!DOCTYPE html>
<html>
<head>
<style>
#newspaper {
  border: solid black 1px;
  background-color: lightgoldenrodyellow;
  columns: 3;
  gap: 50px;
}
</style>
</head>
<body>
<div id="newspaper">
  第一回
宴桃园豪杰三结义
斩黄巾英雄首立功

话说天下大势，分久必合，合久必分：周末七国分争，并入于秦；及秦灭之后，楚、汉分争，又并入于汉；汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃，共相辅佐；时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起，只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十馀丈，飞入温德殿中。秋七月，有虹现于玉堂，五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让，呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。

...... ......
</div>

</body>
</html>