flex中可以写html么,flex兼容性写法

本文将要为您介绍的是flex兼容性写法,具体完成步骤:

flex很早就出来了，但是由于兼容性很差，一直不火。

目前个人只在手机端中小心翼翼的使用flex，整理个模板出来，横轴的！

模板css：

.children{

height: 20px;

border: 1px solid red;

margin: 2px;

}

.parent{

width: 1000px;

border:1px solid green;

}

模板html：

横轴的模板flex兼容性写法：

/* 父元素-横向排列(主轴) */

.parent{

display: box;

display: -webkit-box;

display: -moz-box;

display: -ms-flexbox;

display: -webkit-flex;

display: flex;

-webkit-flex-direction: row;

-moz-flex-direction: row;

-ms-flex-direction: row;

-o-flex-direction: row;

flex-direction: row;

}

/* 子元素-平均分栏 */

.child{

-webkit-box-flex: 1;

-moz-box-flex: 1;

-webkit-flex: 1;

-ms-flex: 1;

flex: 1;

}

/* 父元素-横向换行 */

.parent{

-webkit-flex-wrap: wrap;

-moz-flex-wrap: wrap;

-ms-flex-wrap: wrap;

-o-flex-wrap: wrap;

flex-wrap: wrap;

}

/* 父元素-水平居中(主轴是横向才生效) */

.parent{

-webkit-justify-content: center;

-moz-justify-content: center;

-ms-justify-content: center;

-o-justify-content: center;

justify-content: center;

/*其它取值如下：

align-items 主轴原点方向对齐

flex-end 主轴延伸方向对齐

space-between 等间距排列，首尾不留白

space-around 等间距排列，首尾留白

*/

}

flex兼容性写法就为您介绍到这里，感谢您关注懒咪学编程c.lanmit.com.

本文地址：https://c.lanmit.com/Webqianduan/htmlyucss/38672.html