什么是弹性盒子

弹性盒子：是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当行为的布局方式
---是一种浏览器提倡的布局模型

---布局网页更简单、灵活

---避免浮动脱标的问题

flex的使用

     display:flex;

未设置display:flex;

设置display:flex;

作用

---基于Flex精确灵活控制块级盒子的布局方式，避免福哦的那个布局中脱离文档流现象发生

--Flex布局非常适合结构化布局

组成部分

使用方式

--justify-content 调节元素在主轴的对齐方式

           
            /*默认值，起点开始一次排列*/
            justify-content: flex-start;
            
            /*终点开始一次排列*/
            justify-content: flex-end;
            
           /* 延主轴居中排列 */
            justify-content: center;

            /* 延主轴均匀排列，空白间距均分在弹性盒子两侧，视觉上，子级之间的距离是父级两头距离的2倍 */
            justify-content: space-around;

            /* 间距在弹性盒子之间 */
            justify-content: space-between;

            /* 所有地方的间距都相等 */
            justify-content: space-evenly;

--align-items 调节元素在侧轴的对齐方式


            /*默认值，起点开始一次排列*/
            justify-content: flex-start;
            
            /*终点开始一次排列*/
            justify-content: flex-end;
            
            /* 延侧轴居中 */
            align-items: center;

            /* 拉伸，默认值（子级没有高度才会拉伸） */
            align-items: stretch;

flex-direction 修改主轴方向

         /*默认值*/
        flex-direction：row
        
         /*延相反方向排列*/
        flex-direction：row-reverse
        
        /*将侧轴设为主轴*/
        flex-direction：column
        
        /*延相反方向排列*/
         flex-direction：column-reverse

flex-wrap 属性

    /*弹性容器为单行。该情况下弹性子项可能会溢出容器*/
    flex-warp:nowarp;
  
    /*弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行*/
     flex-warp:warp;
     
    /*反转 wrap 排列*/
    flex-warp:warp-reverse;

align-content

属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

    /*默认。各行将会伸展以占用剩余的空间*/
    align-content:stretch;
    
    /*各行向弹性盒容器的起始位置堆叠*/
     align-content:flex-start;
    
    /*各行向弹性盒容器的结束位置堆叠*/
     align-content:flex-end;
     
    /*各行向弹性盒容器的中间位置堆叠*/
     align-content:center;
     
    /*各行在弹性盒容器中平均分布*/
     align-content:space-between;
    
    /*各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半*/
     align-content:space-around;

弹性盒子子元素属性

排序-order

order: 0

没有设置order属性的顺序值默认为0，负值在前，然后默认为0，正值最后，顺序值越小越在前面

对齐

设置"margin"值为"auto"值，自动获取弹性容器中剩余的空间。所以设置垂直方向margin值为"auto"，可以使弹性子元素在弹性容器的两上轴方向都完全集中。

完美的居中

设置 margin: auto; 可以使得弹性子元素在两上轴方向上完全居中:

align-self

align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式

align-self: auto | flex-start | flex-end | center | baseline | stretch

flex

flex 属性用于指定弹性子元素如何分配空间。

flex：none ||  flex-grow  || flex-shrink  ||  flex-basis

none：none关键字的计算值为: 0 0 auto
flex-grow ：定义弹性盒子元素的扩展比率。
flex-shrink ：定义弹性盒子元素的收缩比率。
flex-basis ：定义弹性盒子元素的默认基准值。

#【博学谷学习记录】超强总结，用心分享#弹性盒子/flex