Flex实现九宫格布局

在小程序开发中，对于九宫格布局或者类似九宫格布局算是挺常见，之前写过一个淘宝的小程序，挺多人私信问到关于布局，其实，用flex实现起来挺简单的。下面就来展示下，用Flex布局实现九宫格布局；

<view class="ninth-view"><ul class="ninth"><li wx:for="{{9-0}}">{{index+1}}</li></ul>
</view>

.ninth{padding:30rpx 30rpx 0 30rpx;display:flex;align-items:center;justify-content: space-between;flex-wrap:wrap;background: #bbb;
}
.ninth li{display:flex;align-items:center;justify-content:center;width: 210rpx;height: 210rpx;  margin-bottom: 30rpx;background:lightblue;list-style:none;
}

这里实现多个方框模块里的水平间距一致的思路是，先给父标签一个padding，然后将一行的方框都设置为两端对齐，模块之间的间隔都相等，即 justify-content: space-between;这里需要计算好，剩下的宽度恰好等于两个间距。

如果需要在里面添加图片和文字，并且水平垂直居中。那就设置每个方框模块都为Flex模式，然后设置多行模块对齐方式为中间对齐，然后给图片一个margin-bottom，这个margin-bottom要等于这个盒子的上边距，就实现了内容的水平垂直居中。

Flex实现九宫格布局相关推荐

flex 九宫格布局实现
简单使用flex实现九宫格布局,代码如下: <!DOCTYPE html> <html> <style> .block {background-color: ora ...
关于flex布局和九宫格布局的实现
1.父容器常见属性 display:flex (项目在主轴上的排列方式) justify-content:flex-start / flex-end / center / space-around / ...
flex 实现菜单九宫格布局
前端小伙伴都知道,现在的手机端项目,例如H5,小程序,app,手机尺寸不等,适配性不是很好,所以一般布局都是用flex来做适配,搭配rem来换算,小程序有自己的换算方法(rpx),可以忽略不计,但fl ...
html九宫格布局原理,了解CSS九宫格布局的几大实现方法
九宫格布局在制作一些Web App时还是经常可以用到的,本篇文章带大家了解一下CSS九宫格布局的几大实现方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 前提说明除非特别说明, ...
css 流式布局九宫格布局
流式布局,也叫百分比布局,是移动端开发中经常使用的布局方式之一. 优点: 当页面宽度发生变化时,页面布局会随着宽度的变化而变化. 适合移动端网页的制作. 高度写死,宽度用%来表示根元素的高度可以写为 ...
rem实现九宫格布局
rem实现九宫格布局---------->>>看图新建一个文件夹为 rem-config.js(自定义) rem-config.js文件代码如下: //作用: 根据不同手机比例(宽 ...
五种方法前端代码实现九宫格布局
前端实现一个九宫格布局,可以用多少种方法实现呐?今天我们就来实际操作一下,看有多少种实现方式. 首先,定义好通用的HTML结构: <div class="box">&l ...
React Native 之ListView及九宫格布局
ListView ListView组件用于显示一个垂直的滚动列表,其中的元素之间结构近似而仅数据不同. ListView更适于长列表数据,且元素个数可以增删.和ScrollView不同的是,ListV ...
css实现九宫格布局的几种方案
实现效果如下: 首先,定义好通用的HTML结构: <div class="box"><ul><li>1</li><li> ...

Flex实现九宫格布局

Flex实现九宫格布局相关推荐

最新文章

热门文章