前端必会的 HTML+CSS 常用技巧之 flex/grid布局，换行显示，两端对齐，最后一行左对齐，间距一致

庄山聆壑

于 2025-04-01 21:00:00 发布

阅读量392

点赞数 3

分类专栏： HTML + CSS 文章标签：前端 html css

本文链接：https://blog.youkuaiyun.com/Zhuangvi/article/details/146402167

版权

HTML + CSS 专栏收录该内容

16 篇文章

订阅专栏

flex 布局

方案一

/* flex 布局 */
.container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  width: 24%;
  background-color: #eee;
  margin-bottom: 20px;
}
/* 将4的倍数的那个元素除外，其他的元素都设margin-right */
.item:not(:nth-child(4n)) {
  margin-right: calc(4% / 3);
}

<p>--------flex 布局--------</p>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

在这里插入图片描述

方案二（子元素宽度固定，margin固定）

/* flex 布局2 */
.container-flex {
  border: 1px solid #000;
  margin: 0 auto;
  width: 860px;
  display: flex;
  flex-wrap: wrap;
}
.container-flex-item {
  width: 200px;
  background-color: #eee;
  margin-bottom: 20px;
}
/* 将4的倍数的那个元素除外，其他的元素都设margin-right */
.container-flex-item:not(:nth-child(4n)) {
  margin-right: 20px;
}

<p>--------flex 布局2 子元素宽度固定，margin固定--------</p>
<div class="container-flex">
  <div class="container-flex-item">1</div>
  <div class="container-flex-item">2</div>
  <div class="container-flex-item">3</div>
  <div class="container-flex-item">4</div>
  <div class="container-flex-item">5</div>
  <div class="container-flex-item">6</div>
</div>

在这里插入图片描述

grid 布局

方案一（固定列数）

/* grid 布局1，列数永远固定4个 */
.container-grid1 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 10px; /* 行间距 20px，列间距 10px */
}

.item-grid1 {
  background: #eee;
}

<p>--------grid 布局1--------</p>
<div class="container-grid1">
  <div class="item-grid1">1</div>
  <div class="item-grid1">2</div>
  <div class="item-grid1">3</div>
  <div class="item-grid1">4</div>
  <div class="item-grid1">5</div>
  <div class="item-grid1">6</div>
</div>

在这里插入图片描述

方案二（子元素宽度固定）

/* grid 布局2，子元素宽度固定，列数不固定，适用于自适应布局 */
.container-grid {
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-gap: 20px 10px; /* 行间距 20px，列间距 10px */
}

.item-grid {
  width: 100px;
  height: 100px;
  background: #eee;
}

<p>--------grid 布局2，子元素宽度固定，列数不固定，适用于自适应布局--------</p>
<div class="container-grid">
  <div class="item-grid">1</div>
  <div class="item-grid">2</div>
  <div class="item-grid">3</div>
  <div class="item-grid">4</div>
  <div class="item-grid">5</div>
  <div class="item-grid">6</div>
</div>