一、帮助青蛙和他的朋友门（flex布局）

游戏链接：帮助青蛙和他的朋友们

秘籍手册如下，学会秘籍才能通关！！！

display:flex; // 弹性盒子布局
    
    
    /*改变items的流向*/
    flex-direction:row;	/*默认的从左到右依次排开*/
    flex-direction:row-reverse; /*从右到左依次排开*/
    flex-direction:column;	/*从上到下依次排开*/
    flex-direction:column-reverse; /*从下到上依次排开*/
    

    /*是否折行*/
    flex-wrap:nowrap; /*默认是不折行的，弹性排版*/
    flex-wrap: wrap; /*折行*/
    flex-wrap: wrap-reverse; /*从下到上排版，然后折行*/
    
    /*主轴的对齐方式*/
    justify-content: flex-start; /*默认样式，从开始的地方开始排，尽量往后靠*/
    justify-content: flex-end;  /*从最后开始排，尽量往后靠*/
    justify-content: center;  /*尽量往中间靠*/
    justify-content: space-around; /*把空间放到周围*/
    justify-content: space-between; /*把空间全部放到中间*/
    justify-content: space-evenly; /*把空间平均分*/
    
    
    /*次轴的对齐方式*/
    align-items:stretch; /*默认的样式，默认拉到跟最长的一样长*/
    align-items:flex-start;/*都往上顶*/
    align-items:flex-end;	/*都往下顶*/
    
    
    /*多行对齐*/
    align-content:flex-start; /*都往上顶，把多余的空间放到下面*/
    align-content:flex-end; /*都往下顶，把多余的空间放到上面*/
    align-content:center; /*把多余的行高放到两边*/
    align-content: stretch; /*把多余的空间平均分配*/
    align-content: space-between; /*把多余的空间放到两边*/
    align-around: space-around; /*把多余的空间放到周围*/

    /*用order排列*/
    order:1; /*可以用order来从小到大排列，默认是0，*/
    
    /*控制item所占的分数*/
    flex-grow:1; /*让item的这个值都为相同的时候会平均分配空间*/
    
    /*flex-shrink控制如何变瘦*/
    flex-shrink:0;  /*当页面缩小到要挤压当前item时，我不缩小，我的兄弟元素先缩小*/
    
    /*控制基本宽度*/
    flex-basis:100px;   
    
    /*可以用align-self来定制align-items*/
    align-self：flex-end;

关卡通关答案：

二、给胡萝卜浇水（grid布局）

游戏链接：给胡萝卜浇水

秘籍手册如下，学会秘籍才能通关！！！

/*让一个东西成为Grid的container*/
    display:grid | inline-grid; 
    
    /*划分一个container的区域，使他成为三行五列*/
    /*每一行的宽度*/
    grid-template-columns: 40px 50px auto 50px 40px;
	/*每一列的宽度*/
    grid-template-rows: 50px 80px auto;
    /*也可以通过分数来分*/
    /*把宽平均分成三份*/
    grid-template-row: 1fr 1fr 1fr;
    /*把列平均分成两份*/
   grid-template-column: 1fr 1fr;

    /*空隙*/
    grid-gap:12px;/*空隙12px*/
    /*也可以来设置上下和左右grid-column-gap和 grid-row-gap*/

/*横向从第几根线开始*/
    grid-row-start:1;
    /*横向从第几根线结束*/
    grid-row-end:4;
    /*纵向从第几根线开始*/
    grid-column-start:1;
    /*纵向从第几根线结束*/
    grid-column-end:4;
    /*grid-row-start, grid-column-start, grid-row-end, 最后是grid-column-end。*/ grid-template-areas:1/2/4/6; /*用order排列*/ order:1; /*可以用order来从小到大排列，默认是0，*/

关卡通关答案：