弹性盒相关知识 ？

概念：

---

弹性盒： 是 CSS3 的一种新的布局模式，使得页面适应不同的屏幕大小和设备类型。(内部自适应)

CSS3 弹性盒： 由 弹性容器 (Flex-container) 和 弹性子元素 (Flex-item) 组成；其中 Flex-container 通过 display:flex; 来设定。

flexbox 属性集值：

---

一，作用在父元素上面的属性:

• display:flex|inline-flex;

                      -->弹性盒的转变

                       flex             (将对象作为弹性伸缩盒显示)

                       inline-flex（将对象作为内联块级弹性伸缩盒显示）;

---

• flex-direction:row|row-reverse|column|column-reverse;

                      -->子元素的排列方式（设置伸缩盒主轴起点和终点位置）
                      row                        默认主轴为横向，起点在左侧，终点在右侧(默认)
                      row-reverse         主轴横向反转，起点在右侧，终点在左侧
                      column                 主轴纵向，起点在上侧，终点在下侧
                      column-reverse   主轴纵向反转，起点在下方，终点在上方;

---

• flex-wrap:nowrap|wrap|wrap-reverse;

                      -->设置和检索伸缩盒里面的子元素超出父元素的时候是否换行
                      nowrap               子元素溢出父元素时不换行(默认)-->自动缩小每个子元素的宽高  确保能放下
                      wrap                     当子元素溢出父元素时自动换行
                      wrap-reverse       反转wrap排列;

---

• justify-content:flex-start|flex-end|center|space-between|space-around;

                      -->设置和检索伸缩盒子元素在主轴方向上的对齐方式
                      flex-start                       弹性盒子元素将向行起始位置对齐
                      flex-end                        弹性盒子元素将向行结束位置对齐
                      center                           弹性盒子元素将向行中间位置对齐
                      space-between          弹性盒子元素会平均的分布在行里
                      space-around             弹性盒子元素会平均的分布在行里，两端保留子元素与子元素之间间距大小的一半;

---

• align-items:flex-start|flex-end|center|baseline|stretch;
               -->设置和检索伸缩盒子元素在侧轴方向上的对齐方式
              flex-start  ：            弹性盒子元素将向列起始位置对齐
              flex-end  ：             弹性盒子元素将向列结束位置对齐
              center     ：             弹性盒子元素将向列中间位置对齐
              baseline：             将文字对齐
              stretch   ：             如果未设置宽高 将元素默认拉伸为父元素高度（默认）;

---

• align-content:flex-start|flex-end|center|space-between|space-around|stretch;

            -->设置各个行的对齐
            flex-start  :             各行向弹性盒容器的起始位置堆叠
            flex-end   :             各行向弹性盒容器的终点位置堆叠
            center  :               各行向弹性盒容器的中间位置堆叠
            space-between 各行在弹性盒容器中平均分布
            space-around :    各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半
            stretch  ：                 各行将会伸展已占用空余空间（默认）;

---

二，作用在子元素上的属性：

• flex-grow：<number>(default 0)；
              -->设置和检索弹性盒的扩展比例,具体数值按比例分配剩余空间
              <number>:    用数值来定义扩展比例，不允许负数
             flex-grow:       默认值为0，不会具有分配剩余空间的权力;

---

• flex-shrink:<number>(default 1)；
             -->设置和检索弹性盒的缩放比例,具体数值按比例缩放超出空间空间
             <number>:           用数值来定义缩放比例，不允许负数
             flex-grow:             默认值为1，不会具有缩放超出空间的权力;

---

• flex-basis:<length>|auto(default auto);
             -->设置和检索弹性盒伸缩基准值
            <length>：           用长度值来定义宽度，不允许负值
            auto:                      无特定宽度值。取决于其他属性值(默认)
           <percentage>:    用百分比来定义宽度，不允许负值;

---

• flex复合属性：flex:none|[flex-grow] [flex-shrink] [flex-basis];
           flex:0 1 auto;    <=>默认值：
           flex:1;                 <=>flex:1 1 0;
           flex:auto;           <=>flex:1 1 auto;
           flex:none;          <=>flex:0 0 auto;

---

• order:<integer>;

                   -->设置和检索弹性盒模型对象的子元素出现的顺序用整数值来定义排列顺序，数值小的排在前面，可以为负数;

---

• align-self:auto|flex-statr|flex-end|center|baseline|stretch;

                    -->用来定义弹性元素自身在侧轴方向上的对齐方式

           auto :          计算值为父元素align-item的值，没有父元素则其值为stretch
          flex-start  :   弹性盒子元素将向列起始位置对齐
          flex-end  :    弹性盒子元素将向列结束位置对齐
          center  :       弹性盒子元素将向列中间位置对齐
          baseline  :    将文字对齐
          stretch :        如果未设置宽高 将元素默认拉伸为父元素高度（默认）;