gap css

作者：放电的牛发布日期:2025-02-23 浏览:125

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

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

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

解释说明：

gap 属性用于在 CSS Grid 布局和 Flexbox 布局中设置项目之间的间距。
在网格布局中，gap 可以控制网格线之间的间距，避免项目过于紧密。
在弹性布局中，gap 可以控制弹性子元素之间的间距，确保布局更加整洁。

上一篇：css 半圆

下一篇：css background:背景图片拉伸铺满