微信小程序 将6个项目 分成两行整齐显示
时间: 2023-09-06 07:08:48 浏览: 95
微信小程序项目
你可以使用 `flex` 布局来实现将6个项目分成两行整齐显示。具体做法如下:
1. 在父元素上设置 `display: flex;`,这样子元素就可以按照一定的规则排列。
2. 设置 `flex-wrap: wrap;`,这样子元素就可以自动换行。
3. 给子元素设置 `flex-basis` 属性,该属性定义了子元素在主轴方向上的初始大小。可以通过计算父元素的宽度和子元素的数量,来确定每个子元素的 `flex-basis` 值。
4. 设置 `margin` 属性来控制子元素之间的间距和与父元素的边距。
下面是一个示例代码:
```css
.parent {
display: flex;
flex-wrap: wrap;
}
.child {
flex-basis: calc(100% / 3 - 10px); /* 一行显示3个,减去间距 */
margin-right: 10px;
margin-bottom: 10px;
}
/* 最后一行子元素要占满整行 */
.child:nth-last-child(-n+3) {
flex-basis: calc(100% / 3 - 10px + 100%);
margin-right: 0;
}
```
注意,上述代码中的 `calc()` 函数用于计算子元素的宽度,其中 `100% / 3` 表示每个子元素占据父元素宽度的 1/3,`-10px` 表示子元素之间的间距。最后一行子元素的 `flex-basis` 值需要加上 `100%`,以占据整行的宽度。
阅读全文