微信小程序中，图片的位置设置

在编写小程序的时候，难免会涉及到图片的位置放置。

以及具体的wxss格式的设置，在这里想进行一个具体格式的讲解。

第一种：图片不换行，多个图片排列在同一行

具体样例如下图：黄色荧光笔所绘：

 要实现该操作，根据图易见，其是由图片，以及文字构成的。

放置一个大的view，包裹住整行

每个图片与文字再放置在一个小的viewItem中，同时进行格式的设置，若要其在同一行，则要将diaplay设置为flex.

设置完viewItem的格式后，在对viewItem image的大小以及比例进行设置。

WXML的具体代码如下：

  //其中的class="lazy" data-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