div元素对齐问题求助：实现自动对齐、页面边界适配与间距分配

Flexbox 方案（推荐） #

这是实现这类流式布局最简洁的方式，能自动处理对齐、换行和间距分配：

<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>

.container {
  /* 启用Flex布局 */
  display: flex;
  /* 子元素总宽度超容器时自动换行 */
  flex-wrap: wrap;
  /* 自动分配子元素间及两侧的留白间距 */
  justify-content: space-around;
  /* 垂直方向居中对齐 */
  align-items: center;
  /* 避免内容贴容器上下边缘 */
  padding: 1rem 0;
}

.item {
  /* 子元素固定宽度，可按需调整 */
  width: 200px;
  /* 子元素固定高度，可按需调整 */
  height: 150px;
  /* 避免内容贴子元素边缘 */
  padding: 1rem;
  /* 辅助查看布局的边框 */
  border: 1px solid #eee;
  /* 可选：优化视觉效果 */
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

如果需要间距仅存在于元素之间（容器左右无留白），修改justify-content并给容器添加左右内边距即可：

.container {
  justify-content: space-between;
  padding: 1rem;
}

Grid 方案（适合复杂列控制） #

若需要更精细的列宽控制，Grid布局适配性更强：

.container {
  display: grid;
  /* 自动生成列：每列最小200px，多余空间平均分配 */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  /* 列之间的固定间距 */
  grid-gap: 1rem;
  /* 避免内容贴容器边缘 */
  padding: 1rem;
}

.item {
  height: 150px;
  padding: 1rem;
  border: 1px solid #eee;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

auto-fit会根据容器宽度自动调整列数，空间不足时自动换行，minmax(200px, 1fr)保证子元素最小宽度的同时，最大化利用剩余空间。

内容的提问来源于stack exchange，提问作者Abdul-Jabbar Suleiman