Responsive Card Layout with Flexbox: Solving Alignment and Wrapping Issues

Requirement Overview

In front‑end development we often need to display a series of fixed‑width cards that automatically wrap on different screen widths.

And the cards should wrap automatically when the screen size changes.

Problems Encountered in Development

Using a safe width (green box) and flex layout seems easy, but when the number of cards is reduced, the layout becomes asymmetric because justify-content: space-between forces the remaining cards to spread out.

Changing justify-content: space-between to align-content: space-between makes the cards align, but the right margin disappears.

.container {
  width: 630px;
  display: flex;
  justify-content: space-between;
  flex-flow: wrap;
}
.crad {
  height: 100px;
  background: blueviolet;
  width: 200px;
  margin-bottom: 16px;
}

Adding a right margin manually fixes the spacing, but when the total width of two cards plus margins exceeds the safe width, the cards wrap unexpectedly, leaving empty space on the right.

Reducing the right margin prevents wrapping but never allows the last card to touch the edge.

How to Solve This Problem

If the last column is always every 3rd element, we can use :nth-child(3n) to remove the right margin on those cards.

.container{
  display: flex;
  width: 630px;
  align-content: space-between;
  flex-flow: wrap;
  .crad{
    height: 100px;
    background: blueviolet;
    width: 200px;
    margin-bottom: 16px;
    margin-right: 16px;
    &:nth-child(3n){
      margin-right: 0;
    }
  }
}

When the container width is not fixed, we wrap the flex container in a red box with overflow: hidden and increase its width by the margin amount using calc(100% + 16px) , so the extra space is clipped.

<template>
  <div class="card-content-box">
    <div class="container">
      <div class="crad">1</div>
      <div class="crad">2</div>
      <div class="crad">3</div>
      <div class="crad">4</div>
      <div class="crad">5</div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.card-content-box{
  width: 100%;
  background: red;
  overflow: hidden;
  .container{
    width: calc(100% + 16px);
    display: flex;
    align-content: space-between;
    flex-flow: wrap;
    .crad{
      height: 100px;
      background: blueviolet;
      width: 200px;
      margin-bottom: 16px;
    }
  }
}
</style>

This approach ensures the layout works regardless of the number of cards or the container width.

Previous Featured Articles

Threejs中三维物体和HTML的爱恨情仇：CSS2DRenderer

git提交错了？别慌，直接删除提交记录

threejs做特效：实现物体的发光效果-EffectComposer详解！

如何快速实现一个无缝轮播效果

我改进了数据滚动方式！老板直接加薪

如何丝滑的实现首页看板拖拉拽功能？