12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758 |
- .flex{
- display:-webkit-box;
- display:-webkit-flex;
- display:flex;
- }
- /* 垂直排列 */
- .flex_co{
- display: flex;
- display: -webkit-flex;
- flex-direction: column;
- }
- /* 垂直水平居中 */
- .f_xy_c{
- -webkit-justify-content: center;
- justify-content: center;
- -webkit-align-items: center;
- align-items: center;
- }
- .f_y_c{
- -webkit-align-items: center;
- align-items: center;
- }
- .f_x_c{
- -webkit-justify-content: center;
- justify-content: center;
- }
- /* 存在剩余空间放大 */
- .f_g_1{
- -webkit-flex-grow:1;
- flex-grow:1;
- }
- /* 空间不够也不缩小 */
- .f_s_0{
- -webkit-flex-shrink:0;
- flex-shrink:0;
- }
- .f_x_s{
- -webkit-justify-content: space-between;
- justify-content: space-between;
- }
- .f_y_s{
- align-items: flex-start;
- -webkit-align-items: flex-start;
- }
- .f_wrap{
- -webkit-flex-wrap: wrap;
- flex-wrap: wrap;
- }
- .ellipsis{
- white-space:nowrap;/*强制文本在一行内显示*/
- text-overflow:ellipsis; /*溢出省略号,支持ie、safari(webkit)*/
- -o-text-overflow:ellipsis; /*溢出省略号,支持opera*/
- overflow:hidden;/*溢出隐藏*/
- }
|