FLex布局整理

1. 任何一个容器都可以指定为Flex布局
   display:flex;
2. 行内元素也可以使用Flex布局
   display:inline-flex;
   常见块级元素有div、h1~h6、hr、ul、ol、p、table、form;
   常见行内元素有a、b、br、em、i、img、span、strong、sub、sup
3. 容器的6个属性
   ①flex-direction
   ②flex-wrap
   ③flex-flow
   ④justify-content
   ⑤align-items
   ⑥align-content
   3.1 flex-direction属性
   flex-direction属性决定主轴的方向

.box{
    flex-direction:row | row-reverse | column | column-reverse
}

                              flex-direction:row

                              flex-direction:row-reverse

                          flex-direction:column

                          flex-direction:column-reverse

3.2 flex-wrap属性
wrap-flex属性，如果一条轴线排不下，如何换行

.box{
    flex-wrap:nowrap | wrap | wrap-reverse
}

                            flex-wrap:nowrap（默认）不换行

                            flex-wrap:wrap 换行，第一行在上方

                            flex-wrap:wrap-reverse 换行,第一行在下方

3.3 flex-flow属性
flex-flow属性是flex-direction与flex-wrap的简写；默认为row nowrap

flex-flow: flex-direction || flex-wrap

3.4 justify-content 属性
justify-content 属性定义了在主轴上的对齐方式，第一个flex-direction属性决定主轴的方向

.box{
    justify-content: flex-start | flex-end | center | space-between | space-around
}

                           justify-content: flex-start

                           justify-content: flex-end

                           justify-content: center

                           justify-content: space-between

                           justify-content: space-around

3.5 align-items 属性
align-items属性定义项目在交叉轴上如何对齐

.box{
    align-items: flex-start | flex-end | center | baseline | stretch
}

                           align-items: flex-start 交叉轴的起点对齐

                           align-items: flex-end 交叉轴的终点对齐

                           align-items: center 交叉轴的中点对齐

                           align-items: baseline 交叉轴的第一行文字的基线对齐

                           align-items: stretch 如果项目未设置高度或设为auto，将占满整个容器的高度。

3.5 align-content 属性
align-items属性定义多跟轴线对齐方式，当轴线只有一根时不起作用。

.box{
    align-content: flex-start | flex-end | center | space-between | space-around | stretch
}

                           align-content: flex-satrt 

                           align-content: flex-end

                           align-content: center

                           align-content: space-between

                           align-content: space-around

1. item属性
   ①order
   ②flex-grow
   ③flex-shrink
   ④flex-basis
   ⑤flex
   ⑥align-self
   4.1 order属性
   order属性决定item的排列顺序，数值越小，排列越靠前，默认值为0；

    .box :nth-of-type(1){
        order: 4;
    }
    .box :nth-of-type(2){
        order: 6;
    }

4.2 flex-grow属性
flex-grow属性决定item的放大比例，默认值为0；

    .box :nth-of-type(4){
        flex-grow:2;
    }
    .box :nth-of-type(1){
       flex-grow: 1;
    }

4.3 flex-shrink属性
flex-shrink属性决定item的缩小比例，当空间不足时，item会自适应缩小，默认值为1；

    .box :nth-of-type(4){
        flex-shrink: 0;
    }

将item4的flex-shrink设为0，其余item都为默认值1时，item4不缩小，其他的等比缩小。
4.4 flex-basis属性
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

    .box :{
        flex-basis: <length> | auto; 
    }

4.5 flex属性
flex-basis属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
该属性有有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
4.6 align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.box{
        width: 1000px;
        height: 300px;
            display: flex;
            align-items: flex-start;
            border: solid 2px black;
    }
    .box :nth-of-type(4){
        align-self: flex-end;
    }

整理：
flex-direction主轴方向，
justify-content主轴对齐方向
flex-wrap 换行
align-items交叉轴上对齐
align-content多根轴线对齐
flex-flow： flex-direction与flex-wrap的简写；默认为row nowrap

order 项目排列顺序，数值越小越靠前，默认值为0
flex-grow 放大比例，默认值为0
flex-shrink 缩小比例，默认值为1
flex-basis 项目占据的主轴空间
align-self 允许单个项目与其他项目有不一样的对齐方式，比align-items多auto属性值
flex： flex-grow, flex-shrink 和 flex-basis简写，默认值为0 1 auto