CSS3弹性盒布局-蒲公英云

CSS3弹性盒布局

box-fiex兼容性的写法
-webkit-box-flex : ;（Safari浏览器，chrome浏览器)
-moz-box-flex: ;（Firefox浏览器）

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>
            本地存储
        </title>
        <style> #all{ background-color: red; //让它变成盒布局 display:-moz-box; display : -webkit-box; } #a{ width : 500px; background-color: #7FFFD4; margin : 20px; } #b{ background-color: brown; margin : 20px; -webkit-box-flex : 1; -moz-box-flex: 1; } #c{ width : 200px; background-color: antiquewhite; margin : 20px; } #a, #b,#c{ -webkit-box-sizing:border-box ; -moz-box-sizing: border-box; box-sizing: border-box; } </style>
        <script type="text/javascript" src="js/canvas.js"></script>
    </head>
    <body>
        <div id="all">
        <div id="a">
框架眼镜和硬性角膜接触镜（角膜塑形镜、rgp</div>
    <div id="b">
        光飞秒ifs150等）和ICL晶体植入术。
    </div>
    <div id="c">
        光飞秒ifs150等）和ICL晶体植入术。
    </div >
    </div>
    </body>
</html>

改变元素的显示顺序
使用弹性和模型的时候可以通过box-ordinal-group属性来改变各个元素的显示顺序
兼容性的写法如下：
-webkit-box-ordinal-group: ;（Safari浏览器，chrome浏览器)
-moz-box-ordinal-group: ;（Firefox浏览器）