如何用我的卡片填充我的容器？ （弹性）

Question

我是 html 新手，我想创建填充容器的卡片。

HTML：

<div class="services-container>
 <div class="services-card">
   <h3>Services 1</h3>
   <p>Services Information</p>
 </div>

 <div class="services-card">

   <h3>Services 2</h3>

   <p>Services Information</p>

 </div>
/!-- and more services -->
</div>

CSS：

.services-container {

    display: flex;

    align-content: flex-start;

}

.services-card {

    display: flex;

    flex-direction: column;

}

结果像这样的图片一样损坏了：

如果有人可以帮助我并提供学习资源，我将不胜感激，谢谢。

卡片填充容器而不会溢出设备宽度

Answer 1

首先，您的代码在第一类“services-container”中缺少双引号。

除此之外，我不知道我是否完全明白你的意思，但是如果你想用所有服务填充整个容器，你可以在 CSS 中添加 width: 100% 。就像这样：

.services-card {
    display: flex;
    flex-direction: column;
    width: 100%;
}