flexbox测试

1.闲着无聊，写了一个九点骰子，用到了flexbox,据说这玩意可以用来进行网页布局，详细的学习请参照以下的两篇博客Flex 布局教程：语法篇和Flex 布局教程：实例篇 ，个人觉得写得很好。

2.九点骰子代码

1）、html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>flexbox画1-9个格子</title>
        <style>
            #div {
                width: 100%;
                height: 100%;
                background-color: greenyellow;
            }
            
            #div div {
                /*将父标签设置为flexbox*/
                display: flex;
                background-color: yellow;
                width: 360px;
                height: 100%;
                flex-wrap: wrap;
                box-shadow: 0px -2px 10px 1px #dae57f;
                ;
                margin: 0 auto;
            }
            
            #div div span {
                margin: 10px 10px;
                width: 100px;
                height: 100px;
                background-color: chartreuse;
                opacity: 0;
                border-radius: 20px;
            }
            /*1*/
            
            #div .box0 .items4 {
                opacity: 1;
            }
            /*2*/
            
            #div .box1 .items0,
            #div .box1 .items8 {
                opacity: 1;
            }
            /*3*/
            
            #div .box2 .items0,
            #div .box2 .items4,
            #div .box2 .items8 {
                opacity: 1;
            }
            /*4*/
            
            #div .box3 .items0,
            #div .box3 .items2,
            #div .box3 .items6,
            #div .box3 .items8 {
                opacity: 1;
            }
            /*5*/
            
            #div .box4 .items0,
            #div .box4 .items2,
            #div .box4 .items4,
            #div .box4 .items6,
            #div .box4 .items8 {
                opacity: 1;
            }
            /*6*/
            
            #div .box5 .items0,
            #div .box5 .items2,
            #div .box5 .items3,
            #div .box5 .items5,
            #div .box5 .items6,
            #div .box5 .items8 {
                opacity: 1;
            }
            /*7*/
            
            #div .box6 .items0,
            #div .box6 .items2,
            #div .box6 .items3,
            #div .box6 .items4,
            #div .box6 .items5,
            #div .box6 .items6,
            #div .box6 .items8 {
                opacity: 1;
            }
            /*8*/
            
            #div .box7 span {
                opacity: 1;
            }
            
            #div .box7 .items4 {
                opacity: 0;
            }
            /*9*/
            
            #div .box8 span {
                opacity: 1;
            }
        </style>

        </style>
        <script type="text/javascript" src="js/jquery.min.js">
        </script>
                $(function(){
            for(var i=0;i<9;i++){
                $('#box').append("<span class='items"+i+"'></span>");
            }
                $("#div div span").css("width",$("#div div span").css("height"));
        });
        
        //页面一加载的时候就运行
    　　(function change(){
            $('#box').attr('class','box'+i);
            if(i<8){
            i++;
            }else{
                i=0;
            }
            setTimeout(change,1000);
   　　 })();
    　　 var i;
       　　 </script>
    　</head>

   　 <body>
        <div id="div">
            <div id="box" class='box0'>
            </div>

        </div>
    </body>

</html>

 2.效果

3、总结

　　1）、大多数的Flexbox属性都应用于父容器的元素上，指定你想要制定的一个容器，使用一个特殊的值显示属性display：flex；

　　2）、使用“flex-row”属性来指定子元素布局是在一行还是一列显示。参数flex-direction(伸缩流的方向)”、“flex-wrap（伸缩行换行）“。其中flex-direction(伸缩流的方向)的属性值： row、 row-revers、 column、 column-reverse。“flex-wrap（伸缩行换行）属性值：wrap、no-wrap、wrap-reverse。

　　3）、flex属性有三个参数：flex-grow（值1、2、3……省略为1）、flex-shrink（值1，2,3……省略为1）、flex-basis（值，200px等。若在flex缩写省略了此属性设置，则flex-basis的指定值是“0”，若flex-basis的指定值是“auto”，则伸缩基准值的指定值是元素主轴长度属性的值。）。

flex:auto”时，伸缩容器中的伸缩项目（相当于flex: 1 1 auto） flex:initial”(相当于flex:0 1 auto)
posted @ 2016-04-23 23:52  alertCode  阅读(320)  评论(0)    收藏  举报