在编写小程序的时候，难免会涉及到图片的位置放置。
以及具体的wxss格式的设置，在这里想进行一个具体格式的讲解。
第一种：图片不换行，多个图片排列在同一行
具体样例如下图：黄色荧光笔所绘：
要实现该操作，根据图易见，其是由图片，以及文字构成的。
放置一个大的view，包裹住整行
每个图片与文字再放置在一个小的viewItem中，同时进行格式的设置，若要其在同一行，则要将diaplay设置为flex.
设置完viewItem的格式后，在对viewItem image的大小以及比例进行设置。
WXML的具体代码如下：
//其中的src是选用的本地的地址，可以自行修改具体图片 衣物 鞋子 帽子 旧包 玩具 WXSS的代码如下：
.allbtn{ padding-top: 15rpx; display: flex; //利用flex设置图片共存于同一行，但是此时不会出现换行 }.btnItem{ width: 100rpx; display: flex; align-items:center; flex-direction: column; //是按行去排列的 padding-right: 60rpx; //每个view item靠右存在的边距}.btnItem image{ width: 70rpx; height: 70rpx;}.btnItem text{ margin-top: 0rpx; font-size: 28rpx; color: gray; display: flex; }第二种：图片出现换行的情况，多个图片排于几行
具体样例如下，在热门生活中，各个图片的排列：
1.大部分都与上述几个图片共行是相同的，不同点在于最大的view中要设置: flex-wrap: wrap
2.在viewItem中，viewItem的大小要利用比例来进行描述，如上图，则其具体比例为50%，若想三个图片共一行，则比例为33.33%。
具体WXML代码如下：
WXML代码如下：
.allbtn2{ display: flex; flex-wrap: wrap; //设置在最大的view中，可以出现换行的情况}.btnItem2{ width: 50%; //设置好，具体的宽度百分比，你想几个图片共处一行 height: 90px; display: flex; //设置图片可以共处一行 flex-direction: column; align-items: center; justify-content: center; }.btnItem2 image{ width: 180px; height: 100px;}来源地址：https://blog.csdn.net/qq_53295063/article/details/127835535
