Swiper自由模式下实现flexbox等高列布局的问题

要给Shadow DOM内的<swiper-slide>父元素（.swiper-wrapper）设置flex布局，可通过以下方式实现：

• 利用Web Component的::part()选择器
  现代Swiper Web Component会为内部核心元素暴露可样式化的part属性，你可以直接通过::part()穿透Shadow DOM设置样式：

  swiper::part(wrapper) {
    display: flex;
    align-items: stretch; /* 关键：让所有slide自动拉伸至等高 */
  }
  
  swiper::part(slide) {
    flex-shrink: 0; /* 保持slide的原始宽度，避免被压缩 */
    width: 30%; /* 根据需求自定义slide宽度 */
  }
  

• 如果使用传统非Web Component版Swiper
  直接给.swiper-wrapper添加flex样式即可，无需处理Shadow DOM：

  .swiper-wrapper {
    display: flex;
    align-items: stretch;
  }
  
  .swiper-slide {
    flex-shrink: 0;
    width: 30%;
  }
  

• 效果验证
  应用样式后，Swiper自由模式下的所有slide会自动填充父容器高度，实现等高列布局，同时保留自由滑动的特性。

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