flex布局

设置给flex盒子的6点属性，分别为
1、flex-wrap: nowrap;（指定项目是否换行）
2、flex-direction: row;（决定主轴方向）
3、flex-flow: nowrap row;（为前两者的缩写）
4、justify-content: flex-start;（项目在主轴上的排列方式）
5、align-items: stretch;（项目在交叉轴上的排列方式）
6、align-content:stretch;（多行时，多跟轴线和交叉轴的对齐方式）

1、flex-wrap 指定项目是否换行

flex-wrap: nowrap | wrap | wrap-reverse
        指定项目是否换行
        nowrap  不换行  默认值
        wrap  换行  正序排列
        wrap-reverse  换行  行倒序排列

2、flex-direction 决定主轴的方向

flex-direction: row | row-reverse | column | column-reverse
        决定主轴方向(项目的排列方向)
        row : 默认水平方向(从左到右)
        row-reverse : 水平方向(从右往左)
        column : 垂直方向(从上到下)
        column-reverse : 垂直方向(从上到下)

3、flex-flow 前两者的缩写

flex-flow: flex-wrap  flex-direction

4、justify-content 决定项目在主轴上的对齐方式

/*justify-content: center | flex-end | flex-start | space-around |space-between
                决定项目在主轴上的对齐方式(一下内容以从左到右为例)
                flex-start : 沿左侧对齐
                center : 沿中间对齐
                flex-end : 沿右侧对齐
                space-around : 均匀分布 (项目两侧留白相等)
                space-between : 项目靠两侧对齐*/

5、aline-items 决定项目在交叉轴上的对齐方式

/*align-items: flex-start   | flex-end | center | stretch | baseline
                决定项目沿交叉的对齐方式(以默认从上到下为例)
                flex-start : 沿上方对齐
                center : 沿中间对齐
                flex-end : 沿下方对齐
                baseline : 沿文字基线对齐
                stretch :  默认值  填满整个交叉轴空间*/     

6、aline-content 多行时，决定多跟轴线跟交叉轴的对齐方式

/*align-content: flex-start | center | flex-end | space-between | space-around | stretch
                决定多跟轴线沿交叉轴的对齐方式(只有换行产出多跟轴线时才有效)
                flex-start : 沿交叉轴起点对齐
                flex-end : 沿交叉轴结束点对齐
                center : 沿交叉轴终点对齐
                space-between : 沿交叉轴两侧对齐
                space-around : 沿交叉轴均匀分布
                stretch : 填满整个交叉轴  默认值*/



#-------------------------------------------------------------------

下面是给项目自身设置的6点属性。
1、**flex-grow: : [number]  决定项目放大比率 (填满主轴剩余空间)**

number : 数值  默认为0 不自动放大,值越大 , 放大比率越大。

2、**flex-shrink: [number] 决定项目缩小的比例(shrink-->收缩)**

number : 数值 默认为1 自动缩小 0 不缩小,值越大缩小比率越大。

3、**flex-basis: auto | pixel | percent （决定项目放大缩小的基准值）**

    auto : 使用项目本身大小
    pixel : 使用指定像素值
    percent : 使用指定的百分比
    100% 当 wrap 时,项目会占容器的整个宽度
    当 nowrap 时,项目会占容器主轴剩余的宽度(其他放大无效)

4、**flex: 1 1 100%;（以上三个的简写）**

5、**align-self: flex-start | flex-end | center | stretch | baseline**   (第一个项目的文字基线)：**决定项目自身的对齐方式(相对于交叉轴)**

6、**order: [number]  决定项目的顺序**

默认为0，越小越靠前，可以接收负值

练习flex的青蛙小游戏