Greasy Fork is available in English.
jkStyle累积
/* ==UserStyle==
<link rel="stylesheet" href="https://greasyfork.org/scripts/439637-jkstyle/code/jkStyle.user.css" />
<style>
div{ border:1px solid red; }
</style>
@name: flexStyle
@name flexStyle
@namespace franciszhao
@description:jkStyle累积
@description jkStyle累积
@author Francis Zhao <francis@n2o.io>
@license MIT
@preprocessor default
@version 0.0.1.20230505015659
==/UserStyle== */
/*-----------------------------*/
/*-------flex布局----------------------*/
/*一般用两个来说明，子块配合使用flex：1
实例：
<div style="height:200px;width:200px;"
class="subcols-tbcenter subcols-lravg" >
<div>a </div><div>a </div>
</div>
*/
.float_toptool{
position: fixed;top:0px;left:0px;right:0px;z-index:999;min-height:25px;min-width:25px;background-color:green;
}
.float_bottomtool{/*漂浮在上层的工具栏，底层最好留一个不小于它的空白块，以免看不到底层的全部内容；*/
position: fixed;bottom:0px;left:0px;right:0px;z-index:999;min-height:25px;min-width:25px;background-color:green;
/*fixed相对于浏览器可见区域；absolute相对浏览器整个页面*/
}
.float_lefttool{
position: fixed;left:0px;top:45%;z-index:999;min-height:25px;min-width:25px;background-color:green;
/*始终左侧，上下居中 精确要配合js计算*/
}
full,.full{ /*全屏*/
border:0px solid green; z-index: 9999;
position: absolute;left:0px;top:0px;right:0px;bottom:0px;
background: rgba(0,0,0,0.1);
}
div,row,col{ border: 1px solid red;margin:3px;min-height: 10px; min-width:10px;}
flex:{min-height: 30px; flex-shrink: 0;}
div1,flex1{flex:1;}
/*使用说明：理解:-------配合flex：1使用
1.subrows对应于flex-direction:column;对应一列多行，多个子行；
subcols对应于flex-direction:row;对应一行多列，多个子列；
2.justify-content:设置主轴方向对齐方式，靠头，靠尾，居中，平均分布；(如果写成延伸，默认为平均分布)
3.align-items:设置次轴方向对齐方式，靠头，靠尾，居中，延伸；
注意：主轴的子块只有平均分布，而无延伸，子块使用flex:1填满；填满剩余空间，配合使用flex：1
其他：flex-shrink: 0; 不自动缩小；flex-wrap：自动换行；
//多个块方向上是平均分布，单块方向上是stretch
*/
/*subrows设置主轴方向的对齐方式justify-content；主轴的子块只有平均分布，而无延伸，子块使用flex:1填满*/
.subrows-tbtop{display:flex;flex-direction:column;justify-content: flex-start;/*key*/}
.subrows-tbbottom{display:flex;flex-direction:column;justify-content:flex-end;/*key*/}
.subrows-tbcenter{ display:flex;flex-direction:column;justify-content: center;/*key*/}
.subrows-tbavg,.subrows-tbstretch{display:flex;flex-direction:column;justify-content: space-evenly;/*key*/}
/*subrows设置次轴方向的对齐方式align-items*/
.subrows-lrleft{ display:flex;flex-direction:column;align-items:flex-start;/*key*/}
.subrows-lrright{display:flex;flex-direction:column;align-items:flex-end;/*key*/}
.subrows-lrcenter{display:flex;flex-direction:column;align-items:center;/*key*/}
.subrows-lrstretch{display:flex;flex-direction:column;align-items:stretch;/*key*/}
/*subcols设置主轴方向的对齐方式justify-content；主轴的子块只有平均分布，而无延伸，子块使用flex:1填满*/
.subcols-lrleft{ display:flex;flex-direction:row;justify-content:flex-start;/*key*/}
.subcols-lrcenter{display:flex;flex-direction:row;justify-content:center;/*key*/}
.subcols-lrright{display:flex;flex-direction:row;justify-content:flex-end;/*key*/}
.subcols-lravg,.subcols-lrstretch{display:flex;flex-direction:row;justify-content: space-evenly;/*key*/}
/*subcols设置次轴方向的对齐方式align-items*/
.subcols-tbtop{ display:flex;flex-direction:row;align-items:flex-start;/*key*/}
.subcols-tbcenter{display:flex;flex-direction:row;align-items:center;/*key*/}
.subcols-tbbottom{display:flex;flex-direction:row;align-items:flex-end;/*key*/}
.subcols-tbstretch{display:flex;flex-direction:row;align-items:stretch;/*key*/}
/*上下左右居中*/
.subcols-tblrcenter,.subcols-allcenter{ display:flex;flex-direction:row;align-items:center;justify-content:center;}
.subrows-tblrcenter,.subrows-allcenter{display:flex;flex-direction:column;align-items:center;justify-content:center;}
/*--------*/
.rounddiv{
border:1px solid #ccc; border-radius:5px;
box-shadow: 0 0px 2px 2px rgba(64,93,230,0.2);
}
/*细线表格*/
/*
<table>
<tr><th>aa</th><td>aa</td></tr>
<tr><td>aa</td><td>aa</td></tr>
</table>
*/
table,th,td{
border:1px solid orange;
border-collapse:collapse;
}
/*常用字体*/
.font1{font-family:Times New Roman,Times,serif;font-size:0.9em;font-weight:normal;}
.font2{font-family:Times New Roman,Times,serif;font-size:1.1em;font-weight:bold;}
/*-----------------------------*/