/*设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效*/
.hdp-uf{
    display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box; /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox; /* 混合版本语法: IE 10 */
    display: -webkit-flex; /* 新版本语法: Chrome 21+ */
    display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
    behavior:url(ie-css3.htc); /* 通知IE浏览器调用脚本作用于'box'类 */
}

.hdp-uf-show{
    display: -webkit-box !important; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box !important; /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox !important; /* 混合版本语法: IE 10 */
    display: -webkit-flex !important; /* 新版本语法: Chrome 21+ */
    display: flex !important; /* 新版本语法: Opera 12.1, Firefox 22+ */
    behavior:url(ie-css3.htc);
}



/* justify-content 设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式*/
/*这里旧版语法有4个参数，而新版语法有5个参数，兼容写法新版语法的 space-around 是不可用的*/
/*box-pack: start | end | center | justify;*/
/*主轴对齐：左对齐（默认） | 右对齐 | 居中对齐 | 左右对齐*/
/*justify-content: flex-start | flex-end | center | space-between | space-around;*/
/*主轴对齐方式：左对齐（默认） | 右对齐 | 居中对齐 | 两端对齐 | 平均分布*/

/*横向起始位置对齐*/
.hdp-uf-hfs{
    -webkit-box-pack: start;
    -moz-justify-content: start;

    -webkit-justify-content:flex-start;
    justify-content:flex-start;
    behavior:url(ie-css3.htc);
}

/*横向结束位置对齐*/
.hdp-uf-hfe{
    -webkit-box-pack: end;
    -moz-justify-content: end;

    -webkit-justify-content:flex-end;
    justify-content:flex-end;
    behavior:url(ie-css3.htc);
}

/*横向居中*/
.hdp-uf-hc{
    -webkit-box-pack: center;
    -moz-justify-content: center;

    -webkit-justify-content: center;
    justify-content: center;
    behavior:url(ie-css3.htc);
}

/*横向平均分布*/
.hdp-uf-hsb{
    -webkit-box-pack: justify;
    -moz-justify-content: justify;

    -webkit-justify-content:space-between;
    justify-content:space-between;
    behavior:url(ie-css3.htc);
}

/*横向平均地分布,两端保留子元素与子元素之间间距大小的一半*/
.hdp-uf-hsa{
    -webkit-justify-content:space-around;
    justify-content:space-around;
    behavior:url(ie-css3.htc);
}


/* align-items 定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式*/
/*这里的参数除了写法不同，其实是功能是一样的*/
/*box-align: start | end | center | baseline | stretch;*/
/*交叉轴对齐：顶部对齐（默认） | 底部对齐 | 居中对齐 | 文本基线对齐 | 上下对齐并铺满*/
/*align-items: flex-start | flex-end | center | baseline | stretch;*/
/*交叉轴对齐方式：顶部对齐（默认） | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/

/*纵向起始位置的边界紧靠住该行的纵向起始边界*/
.hdp-uf-vfs{
    -webkit-box-align: start;
    -moz-align-items: start;

    -webkit-align-items: flex-start;
    align-items:flex-start;
    behavior:url(ie-css3.htc);
}

/*纵向起始位置的边界紧靠住该行的纵向结束边界*/
.hdp-uf-vfe{
    -webkit-box-align: end;
    -moz-align-items: end;

    -webkit-align-items: flex-end;
    align-items:flex-end;
    behavior:url(ie-css3.htc);
}

/*纵向居中*/
.hdp-uf-vc{
    -webkit-box-align: center;
    -moz-align-items: center;

    -webkit-align-items: center;
    align-items: center;
    behavior:url(ie-css3.htc);
}

/*如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐*/
.hdp-uf-vb{
    -webkit-box-align: baseline;
    -moz-align-items: baseline;

    -webkit-align-items: baseline;
    align-items: baseline;
    behavior:url(ie-css3.htc);
}

/*如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制*/
.hdp-uf-vs{
    -webkit-box-align: stretch;
    -moz-align-items: stretch;

    -webkit-align-items: stretch;
    align-items: stretch;
    behavior:url(ie-css3.htc);
}



/* flex-direction 该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置。这将决定flex需要如何进行排列*/
/*子元素的显示方向*/
/*子元素的显示方向可通过 box-direction + box-orient + flex-direction 实现*/

/*横向排列 主轴与行内轴方向作为默认的书写模式。即横向从左到右排列（左对齐）*/
.hdp-uf-dr{
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;

    -moz-flex-direction: row;
    -webkit-flex-direction:row;
    flex-direction:row;
    behavior:url(ie-css3.htc);
}

/*横向排列 对齐方式与row相反(右到左)*/
/*这里补充说明一点： box 写法的 box-direction 只是改变了子元素的排序，并没有改变对齐方式，需要新增一个 box-pack 来改变对齐方式。*/
.hdp-uf-drr{
    -webkit-box-pack: end;
    -webkit-box-direction: reverse;
    -webkit-box-orient: horizontal;

    -moz-flex-direction: row-reverse;
    -webkit-flex-direction:row-reverse;
    flex-direction:row-reverse;
    behavior:url(ie-css3.htc);
}

/*纵向排列 主轴与块轴方向作为默认的书写模式。即纵向从(上往下)排列（顶对齐）*/
.hdp-uf-dc{
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;

    -moz-flex-direction: column;
    -webkit-flex-direction:column;
    flex-direction:column;
    behavior:url(ie-css3.htc);
}

/*纵向排列 对齐方式与column相反 (下往上)*/
.hdp-uf-dcr{
    -webkit-box-pack: end;
    -webkit-box-direction: reverse;
    -webkit-box-orient: vertical;

    -moz-flex-direction: column-reverse;
    -webkit-flex-direction:column-reverse;
    flex-direction:column-reverse;
    behavior:url(ie-css3.htc);
}


/* flex-wrap 该属性控制flex容器是单行或者多行*/
/*flex容器为单行。该情况下flex子项可能会溢出容器*/
.hdp-uf-wn{
    -webkit-flex-wrap:nowrap;
    flex-wrap:nowrap;
    behavior:url(ie-css3.htc);
}

/*flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行*/
.hdp-uf-ww{
    -webkit-flex-wrap:wrap;
    flex-wrap:wrap;
    behavior:url(ie-css3.htc);
}

/*反转 wrap 排列*/
.hdp-uf-wwr{
    -webkit-flex-wrap:wrap-reverse;
    flex-wrap:wrap-reverse;
    behavior:url(ie-css3.htc);
}

/*是否允许放大缩小*/
/* 上面是允许放大，box语法中 box-flex 如果不是0就表示该子元素允许伸缩，而flex是分开的，
上面 flex-grow 是允许放大（默认不允许），下面的 flex-shrink 是允许缩小（默认允许）。
box-flex 默认值为0，也就是说，在默认的情况下，在两个浏览器中的表现是不一样的 */
/* 这里还有一点，就是新旧语法的算法是不一样的，假设 box-flex 的值不等于0，旧语法中，如果有多余的空间，box-flex 的值越大，说明空白部分的占比越多，反之亦然 */
/* 而新版的语法中，放大的比例是直接按 flex-grow 的值来分配的，flex-grow 的缩放会覆盖 flex-shrink:0 */

/*是否允许放大*/
.hdp-uf-gw{
    -webkit-box-flex: 1.0;
    -moz-flex-grow: 1;
    -webkit-flex-grow: 1;
    flex-grow: 1;
}

/*是否允许缩小*/
.hdp-uf-sk{
    -webkit-box-flex: 1.0;
    -moz-flex-shrink: 1;
    -webkit-flex-shrink: 1;
    flex-shrink: 1;
}

/*子元素的显示次序*/
.hdp-uf-order{
    -webkit-box-ordinal-group: 1;
    -moz-order: 1;
    -webkit-order: 1;
    order: 1;
}

/*img显示配置*/
.hdp-uf-img{
    -webkit-background-size:contain;
    -moz-background-size:contain;
    -o-background-size:contain;
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    behavior:url(ie-css3.htc);
}

.hdp-uf-img1{
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    behavior:url(ie-css3.htc);
}

.hdp-uf-img2{
    background-repeat:repeat-x;
    background-size:auto 100%
}

.hdp-uf-img3{
    background-repeat:repeat-y;
    background-size:100% auto
}

.hdp-uf-img4{
    -webkit-background-size:100% auto;
    -moz-background-size:100% auto;
    -o-background-size:100% auto;
    background-size:100% auto;
    background-repeat:no-repeat;
    background-position:center;
    behavior:url(ie-css3.htc);
}

.hdp-uf-img5{
    -webkit-background-size:auto 100%;
    -moz-background-size:auto 100%;
    -o-background-size:auto 100%;
    background-size:auto 100%;
    background-repeat:no-repeat;
    background-position:center;
    behavior:url(ie-css3.htc);
}

.hdp-uf-img6{
    background-repeat:no-repeat;
    background-position:center;
}

.hdp-uf-img7{
    -webkit-background-size:100% 100%;
    -moz-background-size:100% 100%;
    -o-background-size:100% 100%;
    background-size:100% 100%;
    background-repeat:no-repeat;
    background-position:center;
    behavior:url(ie-css3.htc);
}