html-dat14弹性盒子

1.弹性盒子

概念：是一种新的布局模式，它让元素有能力控制子元素的排列。
语法： display:flex | inline-flex; 设置为弹性盒子
inline-flex是行内的弹性盒子，容器的宽度由内容决定。

专业术语：
    容器：被设置成弹性盒子的元素
    项目：容器的子元素
    主轴：子元素的排列方向
    侧轴：与主轴垂直的轴，又叫交叉轴

1.容器身上的属性

    1.设置主轴的方向
        flex-direction:row | column | row-reverse | column-reverse;
    
    2.设置项目在主轴上的排列方式
        justify-content:flex-start | flex-end | center | space-around | space-between | space-evenly;
        space-around间隔在周围
        space-between间隔在之间
        space-evenly均分间隔
    
    3.设置项目是否换行
        flex-wrap:nowrap | wrap | wrap-reverse;
    
    4.项目在侧轴上的对齐方式
        align-items:stretch 拉伸| flex-start | flex-end | center | baseline基线;
        stretch在项目有高度的时候，项目不会有拉伸的效果。
    
    5.设置多根轴线的排列方式
        align-content:stretch | flex-start | flex-end | center | space-around | space-between | space-evenly;
        注意：单根轴无效

    6.设置主轴方向和是否换行的复合属性（了解）
        flex-flow:flex-direction flex-wrap;
        
面试题：弹性盒子实现未知大小的盒子中居中

2.项目身上的属性

    1.项目是否缩小
        flex-shrink: * ;
        1 会缩小 , 0 不缩小;
        如果值为其他数，就会将需要缩小的值，除以所有项目的flex-shrink值的和，得到每一份的值，然后让该项目缩小指定的份数的大小

    2.项目是否放大
        flex-grow: *;
        0不放大，1会放大。
        
案例：移动端手机中间的搜索框放大    

    3.设置项目基准尺寸（了解） = width属性
        flex-basis:auto | *px;
    
    4.放缩的复合属性
        flex:flex-grow flex-shrink flex-basis;
面试题：flex:1;代表的意思是1  1 auto;

    5.项目的排序
        order:数字;
        元素默认的值是0
        排序是从小到大排列。
    
    6.设置项目单独的对齐方式
        align-self:stretch 拉伸| flex-start | flex-end | center | baseline;
案例：骰子六点