如何使用Flex布局在div容器中实现div与image的上下排列？

一、实现数字在图片下方（你的预期效果） #

最简方案有两种，按需选择：

方案1：调整HTML顺序（更符合语义逻辑） #

把<image>放到.num标签前面，再给包裹它们的容器设置Flex垂直排列：

<div className="main"> 
  Корзина 
  <div className="flex-wrap"> 
    <image src="红色圆形图片地址" alt="红色圆形"/> 
    <div className="num">1</div> 
  </div> 
</div>

对应的CSS：

.flex-wrap {
  display: flex;
  flex-direction: column; /* 元素从上到下垂直排列 */
  align-items: center; /* 可选：让元素水平居中，视觉更协调 */
}

方案2：不修改HTML，用反向排列 #

如果不想调整HTML结构，给容器设置column-reverse，直接把原顺序的.num排到图片下方：

.flex-wrap {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
}

二、实现数字在图片上方 #

保持你原有的HTML顺序，给容器设置Flex垂直排列即可，元素会按HTML里的顺序从上到下展示：

<div className="main"> 
  Корзина 
  <div className="flex-wrap"> 
    <div className="num">1</div> 
    <image src="红色圆形图片地址" alt="红色圆形"/> 
  </div> 
</div>

CSS代码：

.flex-wrap {
  display: flex;
  flex-direction: column;
  align-items: center; /* 可选：水平居中优化视觉 */
}

核心逻辑说明 #

• display: flex：将容器转为Flex布局容器，子元素自动成为Flex项目
• flex-direction: column：控制元素垂直排列，顺序与HTML结构一致
• flex-direction: column-reverse：反转垂直排列的顺序
• align-items: center：让元素在水平方向居中，属于视觉优化项，非必须设置

内容的提问来源于stack exchange，提问作者Oksana B