响应式卡片存在最大宽度问题

Question

我想创建一个具有最大宽度的响应式卡片。在较大的屏幕上，卡片应扩展以占据整个可用宽度，而在较小的屏幕上，其宽度应按比例调整以适应屏幕空间。

我试过这个。不幸的是，它不起作用。有没有一种方法可以在不使用媒体查询的情况下实现这一目标？谢谢你。

.card {
  max-width: 300px;
  width: 100%;
  background: pink;
}

<div class="card">
  ...
</div>

Answer 1

.card-container

元素使用

display: flex

创建灵活的容器。 justify-content: center 将卡片在容器内水平居中。

.card 元素的

max-width

为 300px，以确保它不超过一定的宽度。 flex: 1 属性允许卡片扩展并占据容器内的可用空间，同时保持其最大宽度 300px。这样，卡片就会在不同的屏幕尺寸上按比例调整其宽度。

.card-container {
  display: flex;
  justify-content: center;  /* Center the card horizontally */
}

.card {
  max-width: 300px;
  flex: 1;
  background: pink;
}

<div class="card-container">
  <div class="card">
    Card content
  </div>
</div>