如何让CSS Flexbox行不占满屏幕？实现图片2×2合理布局

你之前用flex-direction: column会变成纵向排列，那是因为这个属性把flex容器的主轴设为垂直方向，所有元素只能从上到下堆成一列。要实现横向换行的2×2布局，换个思路就行，下面给两种实用方案：

方案一：Flexbox 实现 #

核心是利用flex的换行特性，同时限制图片宽度，避免占满屏幕50%：

HTML 结构 #

<div class="image-container">
  <img src="img1.jpg" alt="图片1">
  <img src="img2.jpg" alt="图片2">
  <img src="img3.jpg" alt="图片3">
  <img src="img4.jpg" alt="图片4">
</div>

CSS 样式 #

.image-container {
  display: flex;
  flex-wrap: wrap; /* 允许元素换行 */
  justify-content: center; /* 每行图片居中对齐 */
  gap: 16px; /* 图片间的间距，按需调整 */
  max-width: 800px; /* 限制容器最大宽度，避免过宽 */
  margin: 0 auto; /* 让容器在屏幕中居中 */
}

.image-container img {
  width: 300px; /* 固定宽度，可根据需求修改 */
  height: auto; /* 保持图片比例 */
  object-fit: cover; /* 可选，防止图片拉伸变形 */
}

如果不想用固定宽度，也可以用百分比（比如width: 40%），让图片随容器宽度自适应，但不会占满50%的屏幕宽度。

方案二：CSS Grid 实现 #

Grid布局天生适合这种行列明确的场景，代码更简洁：

HTML 结构（和上面一致） #

<div class="image-container">
  <img src="img1.jpg" alt="图片1">
  <img src="img2.jpg" alt="图片2">
  <img src="img3.jpg" alt="图片3">
  <img src="img4.jpg" alt="图片4">
</div>

CSS 样式 #

.image-container {
  display: grid;
  grid-template-columns: repeat(2, 300px); /* 两列，每列宽度300px */
  gap: 16px; /* 图片间的间距 */
  justify-content: center; /* 整个网格在容器中居中 */
  margin: 0 auto;
}

.image-container img {
  width: 100%; /* 图片占满列宽 */
  height: auto;
  object-fit: cover;
}

想要自适应列宽的话，把grid-template-columns改成repeat(2, minmax(250px, 350px))，列宽会在250-350px之间自适应，同时保持两列布局。

补充说明 #

flex-direction: column是专门用来做纵向排列的，要实现横向换行，用默认的flex-direction: row（可省略不写）加上flex-wrap: wrap就能让元素在一行放不下时自动换行。

内容的提问来源于stack exchange，提问作者Man Like Tish