使用 Flex 创建包含多个列和行的块

Question

请帮我像屏幕截图一样创建块：

现在我创建了 2 行，但遇到了一些问题。我不知道如何删除行之间的距离。需要像截图一样

.service-container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  height: 332px;
  width: 100%;
}
.service-container:before {
  content:'';
  flex-basis:100%;
  width:0;
  order:2;
 }
.service-container:after {
  content:'';
  flex-basis:100%;
  width:0;
  order:2;
 }
 .service-container .link {
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  padding:32px;
  box-shadow:0px 4px 4px rgba(94,126,137,0.1);
  border-radius:8px;
  background:#fff;
  height:110px;
  margin:0 6px 6px;
  width:calc(20% - 12px);
 }
 .service-container .link a {
  font-family:"Myriad Pro Regular";
  font-size:24px;
  font-weight:700;
  line-height:26px;
  text-align:center;
  color:#4CB9D4;
 }
 .service-container .item-2 {
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  padding:32px;
  border-radius:8px;
  background:#90D4E5;
  height:100px;
  margin:0 6px 6px;
  width:calc(40% - 12px);
 }
 .service-container .item-3 {
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  padding:32px;
  border-radius:8px;
  background:#006580;
  height:71px;
  margin:0 6px 6px;
  width:calc(20% - 12px);
 }
 .service-container .item-5 {
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  padding:32px;
  border-radius:8px;
  background:#90D4E5;
  height:100px;
  margin:0 6px 6px;
  width:calc(20% - 12px);
 }
 .service-container .item-7 {
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  padding:32px;
  border-radius:8px;
  background:#4CB9D4;
  height:100px;
  margin:0 6px 6px;
  width:calc(20% - 12px)
 }
  .service-container .item-9 {
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  padding:32px;
  border-radius:8px;
  background:#90D4E5;
  height:94px;
  margin:0 6px 6px;
  width:calc(20% - 12px);
 }

<div class="service-container">
<div class="item-1 link"><a href="#">Skin &amp; Dermatology</a></div>
<div class="item-2"> </div>
<div class="item-3"> </div>
<div class="item-4 link"><a href="#">Dental Clinic</a></div>
<div class="item-5"> </div>
<div class="item-6 link"><a href="#">ENT Clinic</a></div>
<div class="item-7"> </div>
<div class="item-8 link"><a href="#">Internal Medicine Clinic</a></div>
<div class="item-9"> </div>
</div>

我正在使用 Twitter Bootstrap 5. 我的网站现在如下所示：

我需要删除行之间的距离。我该怎么做？谢谢

Answer 1

您真正想要的是创建一个砖石结构。您可以在网上找到几个库，例如：https://masonry.desandro.com/

但由于您使用的是 Bootstrap 5，您可以使用此插件： https://getbootstrap.com/docs/5.0/examples/masonry/

使用 Flex 创建包含多个列和行的块

Create block with several columns and rows with Flex

html

css

flexbox

twitter-bootstrap