flex 平铺布局_flex 布局

最近在做公众号项目，用的flex布局，发现真的很好用，可以少写好多css样式代码，在这里记录下最近项目里常用到的一些布局，后续也会一直更新。

项目环境：vue3 + vant (css样式使用的less预处理器)

1. 平均分布并列一排效果图

图片一排并列

// 后面重复的直接复制就可以了，包含样式

企业团检

// css样式为less预处理

// &-menu&为简写，class名前面是一样的，不用重复写

.home-nav{

width: 345px;

height: 110px;

min-height: 110px;

background: #FFFFFF;

border: 1px solid #E7E7E7;

box-shadow: 1px 6px 6px 1px rgba(0, 70, 67, 0.15);

border-radius: 10px;

margin: 0 auto;

display: flex; //排列成一行

padding: 13px 0;

margin-top: 21px;

&-menu{

width: 33%; // 根据排列图片的多少来平均分配比例

display: flex;

flex-direction: column; //纵向排列

align-items: center; //垂直

justify-content: space-between; // 水平

}

&-img{

margin-top: 9px;

width: 38px;

height: 38px;

}

&-content{

font-size: 14px;

font-weight: 400;

color: #343434;

line-height: 36px;

}

}

2. 平均分布并列一排效果图

注：和第1种类似，应用场景多行多个图片展示，这里包含一个样式用伪类实现的

图片多行多列排列

更多服务

体检订单

报告查询

投诉建议

.center-more{

width: 344px;

height: 320px;

background: #FFFFFF;

border: 1px solid #E5E5E5;

box-shadow: 1px 6px 6px 1px rgba(0, 70, 67, 0.15);

border-radius: 15px;

margin: 10px auto;

flex-shrink: 0;

&-service{

display: flex;

//左右两端对齐，即左右两侧项目都紧贴容器，且项目之间间距相等

//写了这个属性后，就不需要再写padding、margin了，属性会根据div来自动平铺

justify-content: space-between;

align-items: ce