能否在Flex布局中重复单个div实现30个房屋窗户效果？

当然可以仅用单个div实现30个窗户的重复效果，以下是两种实用的纯CSS方案：

方案一：CSS背景重复绘制 #

通过多层线性渐变定义单个窗户的样式，再利用background-repeat属性让样式重复排列，铺满整个div区域。这种方法适合规则的、带边框的窗户样式。

.house-windows {
  width: 360px; /* 房屋整体宽度，适配6列窗户 */
  height: 150px; /* 房屋整体高度，适配5行窗户 */
  /* 多层渐变组合成单个窗户：白色边框+淡蓝色玻璃 */
  background: 
    linear-gradient(#fff 2px, transparent 2px, transparent calc(100% - 2px), #fff calc(100% - 2px)),
    linear-gradient(90deg, #fff 2px, transparent 2px, transparent calc(100% - 2px), #fff calc(100% - 2px)),
    linear-gradient(#a0c4ff, #a0c4ff);
  background-size: 60px 30px; /* 单个窗户尺寸：宽60px×高30px */
  background-repeat: repeat;
}

调整width、height和background-size的数值，就能精准控制窗户数量（上述设置为6列×5行，刚好30个）。

方案二：CSS box-shadow生成多元素 #

利用box-shadow支持多阴影的特性，在单个div的伪元素上添加30个偏移阴影，每个阴影模拟一个窗户。这种方法适合需要灵活调整单个窗户位置的场景。

.house {
  width: 360px;
  height: 150px;
  background: #8b4513; /* 墙体颜色 */
  position: relative;
}

.house::before {
  content: '';
  position: absolute;
  width: 40px;
  height: 20px;
  /* 6列×5行共30个窗户，通过x/y偏移控制位置 */
  box-shadow: 
    45px 25px 0 0 #fff, 95px 25px 0 0 #fff, 145px 25px 0 0 #fff, 195px 25px 0 0 #fff, 245px 25px 0 0 #fff, 295px 25px 0 0 #fff,
    45px 60px 0 0 #fff, 95px 60px 0 0 #fff, 145px 60px 0 0 #fff, 195px 60px 0 0 #fff, 245px 60px 0 0 #fff, 295px 60px 0 0 #fff,
    45px 95px 0 0 #fff, 95px 95px 0 0 #fff, 145px 95px 0 0 #fff, 195px 95px 0 0 #fff, 245px 95px 0 0 #fff, 295px 95px 0 0 #fff,
    45px 130px 0 0 #fff, 95px 130px 0 0 #fff, 145px 130px 0 0 #fff, 195px 130px 0 0 #fff, 245px 130px 0 0 #fff, 295px 130px 0 0 #fff,
    45px 165px 0 0 #fff, 95px 165px 0 0 #fff, 145px 165px 0 0 #fff, 195px 165px 0 0 #fff, 245px 165px 0 0 #fff, 295px 165px 0 0 #fff;
}

每个阴影的x和y值控制窗户的位置，调整这些数值可以轻松改变窗户的排列密度或布局。

两种方案都不需要额外的HTML元素，仅通过单个div配合CSS就能实现30个窗户的重复效果，根据你的窗户样式复杂度选择即可。

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