封装Flex 布局库

/**Flex伸缩盒模型兼容性写法库***/
/***FLex：
 *     flex-wrap:nowrap(默认)不换行|| wrap换行第一行在上方||wrap-reverse换行，第一行在下方
 *     flex-flow:flex-direction 和flex-wrap 简写形式    默认值为：row nowrap (横向  不换行)
 *     对齐方式(主轴水平) ：
 * justify-content:flex-start(默认)左对齐
 *                     flex-end右对齐
 *                     center 居中
 *                     space-between 两端对齐项目之间的间隔都相等
 *                     space-around 每个项目两侧的间隔相等。所以项目之间的间隔比项目与边框的间隔大一倍
 * 一根轴线的对齐方式(侧轴垂直) ：
 * align-item:flex-start 上对齐
 *               flex-end 下对齐
 *               center  中间对齐
 * baseline 第一行文字的基线对齐
 *               strecth(默认值)如果项目未设置高度或设置auto，将占满整个容器的高度
 * 多根轴线的对齐方式：
 * align-content:flex-start 上对齐
 *                   flex-end 下对齐
 *                 center  中间对齐
 *                 space-between:两端对齐
 *                 space-around轴线两侧间隔相等
 *                 stretch(默认)轴线占满这个交叉轴
 *
 * 项目属性：
 * order排列的顺序
 * flex-grow项目的放大比例
 * flex-shrink项目的缩放比例
 * flex-basis分配多余空间之前，项目占据主轴空间 默认值为auto
 * align-self：允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父级的align-items属性
 *
 * order：属相定义了项目的排列顺序。数值越小，排列越来靠前，默认为0
 * flex-grow属性定义项目的放大比例，默认为0，如果没有存在剩余空间，也不会放大
 * flex-shrink属性定义了项目的虽小比例，默认为1，如果空间不足该项目该缩小
 *
 * ***/
.Flex{
    display: -webkit-box; /**ios6    safari***/
    display: -moz-box;        /**FF19***/
    display: -ms-flexbox; /***IE10**/
    display:-webkit-flex; /***chrome**/
    display: flex; /**Opera   FF 20+***/
}
/**伸缩流方向*/
.flex-direction_column{
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
/*主轴对齐*/
.justify-content_flex-center{
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}
.justify-content_flex-end{
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}
.justify-content_flex-justify{
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
/*侧轴对齐*/
.align-items_flex-start{
    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
.align-items_flex-end{
    -webkit-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}
.align-items_center{
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.align-items_baseline{
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    -webkit-align-items: baseline;
    align-items: baseline;
}
/*伸缩性*/
.flex_auto{
    -webkit-box-flex: 1;
    -ms-flex: auto;
    -webkit-flex: auto;
    flex: auto;
}
.flex_1{
    width: 0;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}
/*显示顺序*/
.order_2{
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
}
.order_3{
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 3;
    -webkit-order: 3;
    order: 3;
}
/****placeholder****/
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #fff;
    opacity:1;
}

input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #fff;
    opacity:1;
}

input:-ms-input-placeholder{
    color: #fff;
    opacity:1;
}

input::-webkit-input-placeholder{
    color: #fff;
    opacity:1;
}
/*去掉移动端点击高亮样式*/
-webkit-tap-highlight-color: transparent;
/* 匹配手机号的正则表达式
 * 匹配手机号码的正则表达式：/^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/
 * */
/***********媒体查询**************/
/*@media only screen and (min-width: 370px) and (max-width: 450px) {}
@media only screen and (min-width: 450px) and (max-width: 650px) {}
@media only screen and (min-width: 650px) and (max-width: 850px) {}
@media only screen and (min-width: 580px) and (max-width: 1000px) {}*/
/******只能输入数字onkeyup="value=value.replace(/[^\d]/g,'')"********/
/*********移动端input maxlength 失效  解决办法：oninput="if(value.length>11)value=value.slice(0,11)"*************/
/*******判断吧移动端，还是pc端*
 *
 *
 *     Navigator userAgent属性
 * 定义用法：
 * userAgent属性是一个只读的字符串，生命了浏览器用于HTTP请求的用户代理头的值
 * navigator.userAgent
 * document.write("用户代理"+ navigator.userAgent);
 *
 *
 *
 *
 * <script type="text/javascript">
    if(navigator.appName == 'Microsoft Internet Explorer'){
        if(navigator.userAgent.indexOf("MSIE 5.0")>0 || navigator.userAgent.indexOf("MSIE 6.0")>0 || navigator.userAgent.indexOf("MSIE 7.0")>0) {
            alert('您使用的 IE 浏览器版本过低, 推荐使用 Chrome 浏览器或 IE8 及以上版本浏览器.');
        }
    }
    window.sysinfo = {
                                        'isfounder': 0,
        'family': 'x',
        'siteroot': '',
        'siteurl': 'web/index.php?c=user&a=login',
        'attachurl': 'attachment/',
        'attachurl_local': 'attachment/',
        'attachurl_remote': '',
        'module' : {'url' : '', 'name' : ''},
        'cookie' : {'pre': '6388_'},
        'account' : null,
        'server' : {'php' : '5.6.27'},
    };
    </script>
 *
 * *******/