css flex gap

作者：青灯寂焚发布日期:2025-02-05 浏览:177

/* 使用 CSS Flexbox 和 gap 属性创建有间距的弹性布局 */

.container {
  display: flex;
  flex-wrap: wrap; /* 允许子元素换行 */
  gap: 10px; /* 设置子元素之间的间距为 10px */
}

.item {
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

解释说明：

display: flex;：将 .container 设置为弹性容器，使其子元素成为弹性项目。
flex-wrap: wrap;：允许弹性项目在必要时换行。
gap: 10px;：设置弹性项目之间的间距为 10px。gap 属性可以同时控制行和列之间的间距。
.item 类定义了每个弹性项目的宽度、高度和背景颜色。

通过这种方式，你可以轻松地创建一个有间距的弹性布局。

上一篇：css上一个兄弟元素怎么找到

下一篇：css 自定义滚动条