css flex 间距

作者：醉眼看苍生发布日期:2025-05-14 浏览:36

/* 使用 CSS Flexbox 实现间距的示例代码 */

.container {
  display: flex;
  justify-content: space-between; /* 子元素之间以及子元素与容器边缘之间的间距 */
  gap: 10px; /* 子元素之间的间距 */
}

.item {
  flex: 1; /* 子元素等宽分布 */
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

解释说明：

.container 使用了 display: flex 来启用 Flexbox 布局。
justify-content: space-between 使得子元素之间以及子元素与容器边缘之间有均匀的间距。
gap: 10px 设置了子元素之间的间距为 10px。
.item 类设置了每个子元素的样式，包括背景颜色、内边距和文本居中。

上一篇：css3特效

下一篇：text/css