128 lines
2.0 KiB
SCSS
128 lines
2.0 KiB
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;
|
|||
|
|
}
|
|||
|
|
}
|