css gap

作者：吃斋的狼发布日期:2025-02-08 浏览:64

/* 使用 CSS gap 属性设置网格或弹性容器中项目之间的间距 */

/* 示例 1: 网格布局 */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 创建一个三列的网格 */
  gap: 10px; /* 设置行和列之间的间距为 10px */
}

/* 示例 2: 弹性布局 */
.flex-container {
  display: flex;
  flex-wrap: wrap; /* 允许子元素换行 */
  gap: 20px 10px; /* 第一个值是行间距，第二个值是列间距 */
}

解释说明：

gap 属性用于设置网格或弹性容器中项目之间的间距。
在网格布局中，gap 可以设置行和列之间的间距。
在弹性布局中，gap 可以分别设置行间距和列间距。

上一篇：css padding

下一篇：css滚动条样式修改