如何在Flex容器中让日历<li>自动填充空白区域？

问题说明 #

在日期6的<li>后添加了类名为upcoming_event_preview的元素，用于展示「即将到来的活动」图片，该元素需占据2行高度。预期日期8移至6下方、日期9移至7下方填补空白，但未实现。尝试调整Flex属性无效，且不希望通过flex:1让日期<li>拉伸填充。

原代码 #

CSS #

.event_calendar ul {
  padding: 0 20px;
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  color: #000000;
  text-align: center;
}

.event_calendar .days {
  margin-bottom: 20px;
  justify-content: space-between;
}

.event_calendar li {
  display: flex;
  color: #333;
  width: calc(100% / 5);
}

.event_calendar .days li {
  z-index: 1;
  width: 100px;
  height: 100px;
  cursor: pointer;
  position: relative;
  margin-top: 5px;
  justify-content: center;
  font-size: 30px;
  font-weight: 600;
  color: #fff;
}

.days li::before {
  position: absolute;
  content: "";
  height: 100px;
  width: 100px;
  z-index: -1;
  border-radius: 5px;
  transform: translate(0%, -30%);
}

.days li.event_date::before {
  position: absolute;
  content: "";
  background: #f2f2f2;
  background-image: url('https://st2.depositphotos.com/1635204/7654/i/450/depositphotos_76549817-stock-photo-word-events-on-colorful-wooden.jpg');
  background-size: cover;
  height: 100px;
  width: 100px;
  z-index: -1;
  border-radius: 5px;
  transform: translate(0%, -30%);
}

.days li.upcoming_event_preview {
  z-index: 1;
  cursor: pointer;
  position: relative;
  justify-content: center;
  margin-top: 5px;
  width: 300px;
  height: 250px;
  font-size: 30px;
  font-weight: 600;
  color: #fff;
}

.days li.upcoming_event_preview::before {
  position: absolute;
  content: "";
  background-image: url('https://clipart-library.com/img1/1038152.png');
  background-size: contain;
  margin: 5px;
  width: 300px;
  height: 250px;
  z-index: -1;
  border-radius: 5px;
  transform: translate(0%, -10%);
}

HTML #

<div class="event_calendar">
  <ul class="days">
    <li class="event_date"> 1 </li>
    <li class="event_date"> 2 </li>
    <li class="event_date"> 3 </li>
    <li class="event_date"> 4 </li>
    <li class="event_date"> 5 </li>
    <li class="event_date"> 6 </li>
    <li class="upcoming_event_preview"></li>
    <li class="event_date"> 7 </li>
    <li class="event_date"> 8 </li>
    <li class="event_date"> 9 </li>
    <li class="event_date"> 10 </li>
    <li class="event_date"> 11</li>
    <li class="event_date"> 12 </li>
  </ul>
</div>

解决方案 #

Flex是一维布局，只会在当前行排列元素，无法回溯填补跨行元素留下的空白。改用CSS Grid布局（二维布局）可完美解决这个问题，无需拉伸日期元素。

修改后的CSS代码 #

.event_calendar ul {
  padding: 0 20px;
  display: grid; /* 替换flex为grid */
  grid-template-columns: repeat(5, 100px); /* 5列，每列宽度100px */
  grid-auto-rows: 100px; /* 每行默认高度100px */
  gap: 5px; /* 统一控制元素间距，替代margin */
  list-style: none;
  color: #000000;
  text-align: center;
}

.event_calendar .days {
  margin-bottom: 20px;
}

.event_calendar li {
  display: flex;
  color: #333;
  justify-content: center;
  align-items: center; /* 让内容居中 */
}

.event_calendar .days li {
  z-index: 1;
  cursor: pointer;
  position: relative;
  font-size: 30px;
  font-weight: 600;
  color: #fff;
}

.days li::before {
  position: absolute;
  content: "";
  height: 100%; /* 用百分比适配容器 */
  width: 100%;
  z-index: -1;
  border-radius: 5px;
  transform: translate(0%, -30%);
}

.days li.event_date::before {
  position: absolute;
  content: "";
  background: #f2f2f2;
  background-image: url('https://st2.depositphotos.com/1635204/7654/i/450/depositphotos_76549817-stock-photo-word-events-on-colorful-wooden.jpg');
  background-size: cover;
  height: 100%;
  width: 100%;
  z-index: -1;
  border-radius: 5px;
  transform: translate(0%, -30%);
}

.days li.upcoming_event_preview {
  z-index: 1;
  cursor: pointer;
  position: relative;
  grid-row: span 2; /* 占据2行高度 */
  grid-column: span 3; /* 占据3列宽度，对应原300px */
  font-size: 30px;
  font-weight: 600;
  color: #fff;
}

.days li.upcoming_event_preview::before {
  position: absolute;
  content: "";
  background-image: url('https://clipart-library.com/img1/1038152.png');
  background-size: contain;
  background-repeat: no-repeat; /* 防止图片重复 */
  background-position: center; /* 图片居中显示 */
  height: 100%;
  width: 100%;
  z-index: -1;
  border-radius: 5px;
  transform: translate(0%, -10%);
}

关键修改点 #

1. 将容器布局从flex改为grid，利用Grid的二维排布特性自动填补空白
2. 用grid-template-columns定义固定的5列布局，匹配原日期元素宽度
3. 通过grid-row: span 2让预览元素占据2行，grid-column: span 3控制其宽度
4. 用gap替代margin，更统一地管理元素间距
5. 将元素内的宽高改为百分比，适配Grid容器的尺寸

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