css gap属性

作者：昔日暖阳发布日期:2025-12-28 浏览:91

/* 使用 gap 属性设置网格或弹性布局中元素之间的间距 */

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

/* 示例 2: 弹性布局 */
.flex-container {
  display: flex;
  flex-wrap: wrap; /* 允许子元素换行 */
  gap: 15px; /* 设置弹性项之间的行和列间距为 15px */
}

解释说明：

gap 属性用于设置网格布局 (grid) 或弹性布局 (flex) 中，元素之间的间距。
在网格布局中，gap 可以控制行与列之间的间距。
在弹性布局中，gap 可以控制弹性项之间的间距，即使它们在多行或多列中换行。

如果你需要更具体的用法或有其他问题，请随时告诉我！

上一篇：css加粗字体

下一篇：css :has