Skip to main content

前端元素自动铺满换行

· One min read
Czasg

主要有三种方式：

  • inline-block
  • flex + flex-wrap
  • grid

inline-block​

在子元素中增加inline-block属性

.block {
    display: inline-block;
}

flex​

在父元素中使用，此时不能设置高度。

.block {
    display: flex;
    flex-wrap: wrap;
}

因为flex-wrap属性指定flex元素单行显示还是多行显示，设置了高度将会平铺。

grid​

在父元素中使用，此时不根据大小平铺，而是强制平铺

.block {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /*横向排布时，宽度均分为三等分*/
}

👇👇👇

本文作者: Czasg
版权声明: 转载请注明出处哦~👮‍