弹性盒布局

1.弹性盒布局介绍

        2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。

        Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。任何一个容器都可以指定为 Flex 布局。多用于列举布局、移动端布局、自适应布局。

        采用flex布局的元素，称为Flex容器，简称“容器”。弹性容器通过设置display属性的值为flex将其定义为弹性容器。它的所有子元素自动成为容器的成员。

2、核心概念

        2.1主轴

        弹性元素始终沿着主轴方向排列、默认是水平轴、可以更改主轴排列方向。

        2.2 交叉轴

        默认是垂直方向交叉轴。可以更改交叉轴的排列方向。

        2.3容器属性 

        2.3.1 display：flex                                                                                                             

            开启弹性盒布局 弹性元素沿着主轴方向进行排列 默认主轴就是水平轴

        2.3.2 flex-direction                                                                                                           

          更改主轴的排列方向(即项目的排列方向）   默认值就是水平轴：row                                

         设置垂直轴：column     水平轴翻转：row-reverse     垂直轴反转：column-reverse

         2.3.3 flex-wrap                                                                                                                  

          当父容器的宽度不足以放下所有的弹性元素时，不会进行换行显示，而是会将弹性元素进行等比例压缩。如若不想进行压缩，设置换行显示即可。

          设置弹性元素是否换行显示，默认是不换行，默认值是：nowrap     换行显示设置：wrap     换行反转：wrap-reverse

         2.3.4 flex-flow                                                                                                                  

         flew-flow是 flex-direction 和 flex-wrap 属性的简写， 属性值书写顺序(先主轴再垂直轴)：column wrap;

         2.3.5 justify-content                                                                                                         

        更改主轴弹性元素的对齐方式，                                                                                         

       1、默认值是主轴起点对齐(左对齐)：flex-start

        2、 主轴终点对齐(右对齐)：flex-end 

         3、主轴中间对齐：center

         4、中间弹性元素的空间是左右弹性元素空间两倍：space-around 

         5、空间均匀分配 弹性元素左右两侧空间都是相等的：space-evenly 

         6、最左侧和最右侧的弹性元素紧贴父容器排列：space-between

         7、平铺拉伸 占满父容器的高度(不要设置height 否则不生效)：stretch 

                        

        2.3.6 align-items                                                                                                       

          更改交叉轴对齐方式 ：                                                                                               

             1、默认值上对齐： flex-start 

               2、 下对齐：flex-end

               3、 居中对齐：center

               4、弹性元素文字对齐 基线对齐：baseline 

                 5、平铺拉伸： stretch

        2.3.7 align-content                                                                                                 

        更改多行弹性元素对齐方式                                                                                               

        1、默认值，平铺拉伸，占满父容器的高度，前提是取消高度： stretch

• 

            2、多行弹性元素起点对齐： flex-start

  

           3、多行弹性元素终点对齐： flex-end 

  

           4、多行弹性元素居中对齐： center 

  

            5、空间均匀分配 弹性元素上下两侧空间都是相等的： space-evenly

  

                6、最上侧和最下侧的弹性元素紧贴父容器排列：space-between

  

                      7、 中间弹性元素的空间是上下弹性元素空间两倍：space-around

        2.4 弹性元素属性

        2.4.1 order     更改弹性元素排列顺序 值越大越靠后 值越小越靠前  默认值为0             

         例：                                            

.div1 {
          order: 3;
      }
.div2 {
          order: 2;
      }
.div3 {
          order: 1;
      }

 

        2.4.2 flex-grow                                                                                                                          

         默认父容器有剩余空间的时候弹性元素是不会放大的 不会占满父容器剩余空间， flex-flow设置当元素有剩余空间的时候 是否放大 默认不放大 默认值是0

 div{
                flex-grow:1
            }   
 p{
                flex-grow:2
            }

            表示将父元素剩余空间分为3份 div占1 p占2

        2.4.3  flex-shrink                                                                                                                         

        当父元素宽度不足以放下所有弹性元素 是否会等比例压缩 默认等比例压缩 默认值1

.div2 {
            /* 不进行等比例的压缩 保持原有的宽度 */
            flex-shrink: 0;
        }

 

        2.4.4  flex-basis                                                                                                           

        给弹性元素设置宽度，同时设置 width 和 flex-basis，flex-basis 优先级高于 width，默认是auto                       

.div2 {
            flex-basis: 100px;
      }

 

        2.4.5 flex                                                                                                                   

        1、flex是 flex-grow flex-shrink flex-basis简写. 

.div2 {
          /* flex-grow  flex-shrink flex-basis可以简写为flex属性 */
          flex: 0 1 200px;
 }

 

      2、flex属性只给其中一个弹性元素设置 表示将父容器剩余空间设置给这个弹性元素 

 .div1 {
            flex: 1;
        }

      3、flex属性设置给多个弹性元素 就按照设置的数字就行倍数划分

.div1{flex: 1}  .div2{flex:2}  表示的弹性元素2宽度是弹性元素1宽度2倍 

         2.4.6 align-self                                                                                                                   

        表示单个弹性元素在交叉轴自身对齐方

           1、 flex-start  

            2、flex-end                                                                                                                            

             3、center 

             4、baseline  

             5、stretch