使用 “display: flex；justify-content: center；align-items: center； ” 解决流式栅格布局无法居中的问题

流式栅格系统，随着屏幕或视口分为 24 份，可以迅速简便地创建布局

基本用法

<uni-row class="demo-uni-row">
	<uni-col>
		<view class="demo-uni-col dark_deep"></view>
	</uni-col>
</uni-row>

<uni-row class="demo-uni-row">
	<uni-col :span="12">
		<view class="demo-uni-col dark"></view>
	</uni-col>
	<uni-col :span="12">
		<view class="demo-uni-col light"></view>
	</uni-col>
</uni-row>

使用了两行格栅布局，每个格栅的列数为 6 ，一行四个格栅刚好 4 X 6 = 24 

			<view class="outer-box" style="height: auto;border: 1px solid #fff;">
				<unicloud-db v-slot:default="{data, loading, error, options}" collection="opendb-mall-categories"
					style="display: block;">
					<uni-row>
						<uni-col v-if="index<4" width="100%" v-for="(item, index) in data" :span="6">
							<view style="">
								<image :src="item.icon.url" style="height: 35px;width: 35px;"></image>
								<text>{{item.name}}</text>
							</view>
						</uni-col>
					</uni-row>

					<uni-row width="100%">
						<uni-col v-if="index>=4" v-for="(item, index) in data" :span="6">
							<view>
								<image :src="item.icon.url" style="height: 35px;width: 35px;"></image>
								<text>{{item.name}}</text>
							</view>
						</uni-col>
					</uni-row>
				</unicloud-db>

然和展现出来的结果并不满意   左偏移了

尝试了很多办法去居中 但是没有用

认真思考了一下 ， 格栅 24 刚刚好的 ，为什么会不居中呢 ？

因为一个格栅装一个图片 但是格栅大于图片 不居中的原因是因为格栅大于图片 而图片是靠着格栅左侧摆放的

 如下图

知道原因后就好办了  只需把每一个格栅里面的< view > 加上这样的样式

{

        display: flex;

        justify-content: center;

        align-items: center;

}

 

搞定