CSS flex布局通用库（小程序/H5/uniapp都可用）

今天药忘吃喽~ 2022-12-21 03:10 69阅读 0赞

# 演示示例： #

> [https://mydarling.gitee.io/uniapp-extend/\#/pages/sdk/flex][https_mydarling.gitee.io_uniapp-extend_pages_sdk_flex]

# 源码下载&说明文档： #

> [https://ext.dcloud.net.cn/plugin?id=921][https_ext.dcloud.net.cn_plugin_id_921]

# CSS编译文件（含移动项目全局样式表） #

> [https://mydarling.gitee.io/resource/files/helang-mobile.css][https_mydarling.gitee.io_resource_files_helang-mobile.css]

# scss源码： #

/*
     *  uni-app flex 布局盒子
     *  作者:helang
     *  邮箱:helang.love@qq.com
    */
    
    /* 分列式弹性盒子，以X轴从左到右排列 */
    .h-flex-x{
    	display: flex;
    	flex-direction: row;
    	flex-wrap: nowrap;
    	justify-content: flex-start;
    	align-items: center;
    	align-content: center;
    	
    	/* 水平左对齐 */
    	&.h-flex-left{
    		justify-content: flex-start;
    	}
    	
    	/* 水平居中对齐 */
    	&.h-flex-center{
    		justify-content: center;
    	}
    	
    	/* 水平右对齐 */
    	&.h-flex-right{
    		justify-content: flex-end;
    	}
    	
    	/* 水平两端对齐 */
    	&.h-flex-space{
    		justify-content: space-between;
    	}
    	
    	/* 垂直顶部对齐 */
    	&.h-flex-top{
    		align-items: flex-start;
    		align-content: flex-start;
    	}
    	
    	/* 垂直底部对齐 */
    	&.h-flex-bottom{
    		align-items: flex-end;
    		align-content: flex-end;
    	}
    	
    	/* 允许换行 */
    	&.h-flex-wrap{
    		flex-wrap: wrap;
    	}
    	
    	/* 等比分列，2-6列 */
    	@for $i from 2 through 6
    	{
    		&.h-flex-#{$i}{
    			&>view{
    				width:(100% / $i);
    			}
    		}
    	}
    	
    	/* 弹性元素 */
    	.h-flex-item-grow{
    		flex-grow: 1;
    		width:0;
    	}
    }
    
    /* 分行式弹性盒子，以Y轴从上到下排列 */
    .h-flex-y{
    	display: flex;
    	flex-direction: column;
    	flex-wrap: nowrap;
    	justify-content: flex-start;
    	align-items: flex-start;
    	align-content: flex-start;
    	
    	/* 垂直居中对齐 */
    	&.h-flex-center{
    		justify-content: center;
    		align-items: center;
    		align-content: center;
    	}
    	
    	/* 水平左对齐 */
    	&.h-flex-left{
    		align-items: flex-start;
    		align-content: flex-start;
    	}
    	
    	/* 水平右对齐 */
    	&.h-flex-right{
    		align-items: flex-end;
    		align-content: flex-end;
    	}
    	
    	/* 垂直两端对齐 */
    	&.h-flex-space{
    		justify-content: space-between;
    	}
    	
    	/* 垂直顶部对齐 */
    	&.h-flex-top{
    		justify-content: flex-start;
    	}
    	
    	/* 垂直底部对齐 */
    	&.h-flex-bottom{
    		justify-content: flex-end;
    	}
    	
    	/* 等比分行，2-6行 */
    	@for $i from 2 through 6
    	{
    		&.h-flex-#{$i}{
    			&>view{
    				height:(100% / $i);
    			}
    		}
    	}
    	
    	/* 弹性元素 */
    	.h-flex-item-grow{
    		flex-grow: 1;
    		height: 0;
    	}
    }

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 本文原创，著作权归作者所有，转载请注明原链接及出处。

[https_mydarling.gitee.io_uniapp-extend_pages_sdk_flex]: https://mydarling.gitee.io/uniapp-extend/#/pages/sdk/flex
[https_ext.dcloud.net.cn_plugin_id_921]: https://ext.dcloud.net.cn/plugin?id=921
[https_mydarling.gitee.io_resource_files_helang-mobile.css]: https://mydarling.gitee.io/resource/files/helang-mobile.css
[Link 1]: https://blog.csdn.net/u013350495