如何在<layer-list>中均匀分布item实现全屏适配背景效果

你可以通过以下3种常用方案实现，不需要给item设置固定宽度即可自动适配不同屏幕尺寸： #

方案1：Flex布局（兼容性最佳，最常用） #

给item的父容器开启flex布局，子元素设置flex:1即可自动均分父容器空间：

/* 父容器样式 */
.item-wrapper {
  display: flex;
  width: 100vw; /* 占满整个视口宽度 */
  min-height: 100vh; /* 需要占满全屏高度可以加这个属性 */
  margin: 0;
  padding: 0;
  /* 如果需要item之间有间距，加 gap: 10px; 即可，不需要手动调整宽度 */
}
/* 子item样式 */
.item {
  flex: 1;
  /* 你的自定义item样式，比如背景色、内容对齐等 */
}

方案2：Grid布局（写法最简洁，适合多列布局） #

直接在父容器指定4等分列即可：

.item-wrapper {
  display: grid;
  width: 100vw;
  min-height: 100vh;
  grid-template-columns: repeat(4, 1fr); /* 生成4个等宽的列 */
  /* 同样支持gap属性设置item间距 */
}

方案3：百分比宽度（兼容极低版本浏览器） #

如果需要兼容IE8等非常老的浏览器，可以用百分比宽度方案，注意配合box-sizing避免边框内边距撑宽元素：

.item-wrapper {
  width: 100vw;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}
.item {
  box-sizing: border-box;
  float: left;
  width: 25%;
  /* 你的自定义样式 */
}

注意：如果使用百分比方案，不要给item设置左右margin，否则总宽度会超过100%导致换行，有间距需求更推荐用Flex/Grid方案的gap属性实现。

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