Materialize不等高列网格布局求助：实现Bootstrap式换行对齐

嘿，这个Materialize网格的错位问题我之前也遇到过，给你两个靠谱的解决方案，都能实现和Bootstrap一样的不等高列换行效果：

方案一：用Materialize自带的Clearfix强制换行 #

Materialize默认的网格是基于float布局的，不等高的列会让后面的元素“钻”进前面的空隙里，导致错位。我们可以利用Materialize自带的clearfix类，每隔3个列就插入一个清除浮动的元素，强制下一行的列从左侧开始排列。

代码示例 #

<div class="row">
  <!-- 第一行3列 -->
  <div class="col s12 m4">
    <div class="card">
      <!-- 高度较高的内容 -->
    </div>
  </div>
  <div class="col s12 m4">
    <div class="card">
      <!-- 普通高度内容 -->
    </div>
  </div>
  <div class="col s12 m4">
    <div class="card">
      <!-- 普通高度内容 -->
    </div>
  </div>
  <!-- 插入clearfix强制换行 -->
  <div class="clearfix"></div>
  
  <!-- 第二行及后续列 -->
  <div class="col s12 m4">
    <div class="card">
      <!-- 任意高度内容 -->
    </div>
  </div>
  <!-- 以此类推 -->
</div>

原理说明 #

clearfix类会清除前面float元素的影响，让下一行的列不受前面不等高元素的干扰，严格从左侧开始排列，和Bootstrap的float网格逻辑完全一致。如果是动态生成内容（比如用JS循环渲染），只需要在每3个列的循环结束后插入这个clearfix元素即可。

方案二：Flexbox修复最后一行对齐问题 #

你之前尝试的Flexbox方向是对的，只是缺少了固定列宽和左对齐的设置。我们可以通过调整Flex属性，让每列宽度固定，同时强制最后一行左对齐。

代码示例 #

/* 给row开启flex布局并允许换行 */
.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* 强制所有行左对齐 */
}

/* 针对m4列设置固定宽度，禁止伸缩 */
@media only screen and (min-width: 601px) {
  .row .col.m4 {
    flex: 0 0 33.333333%; /* 不缩小、不放大，固定占1/3宽度 */
    max-width: 33.333333%;
  }
}

/* 移动端保持100%宽度，不做修改 */
@media only screen and (max-width: 600px) {
  .row .col.s12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

原理说明 #

• flex: 0 0 33.333333% 确保每列的宽度严格是父容器的1/3，不会因为内容多少而伸缩；
• justify-content: flex-start 让所有行的元素都靠左对齐，解决了之前最后一行元素分散的问题；
• 加上媒体查询后，能保持Materialize原有的响应式特性，移动端依然是单列布局。

这两个方案都能完美实现你想要的效果，根据你的内容生成方式选就行：静态内容用方案一更省心，动态内容或者喜欢Flexbox的话选方案二更优雅。

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