flex布局（弹性盒模型）知识点

flex布局

基本概念

• Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
  
  • 老版本我们通常称为box;
  • 新版本我们成为flex;
  • Webkit 内核的浏览器，必须加上-webkit前缀。

//老版本
 display: -webkit-box;

//新版本
display:flex;

• 采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
• 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。
  
  • 主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；
  • 交叉轴的开始位置叫做cross start，结束位置叫做cross end。
  • 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
    

flex属性

容器上的属性

老版本容器属性

• 容器的布局方向： -wibkit-box-orient属性改变主轴哪一根；

  • horizontal 指定子元素在一个水平线上从左至右排列；
  • vertical 从顶部向底部垂直布置子元素；
  • （略）inline-axis 子元素沿着内联坐标轴（映射到横向）；
  • （略）block-axis 子元素沿着块坐标轴（映射到垂直）；
  • （略）inherit box-orient 属性的值应该从父元素继承 ；

• 容器的排列方向： -wibkit-box-direction改变了主轴的方向；

  • normal 以默认方向显示子元素。
  • reverse 以反方向显示子元素。
  • inherit 应该从子元素继承 box-direction 属性的值；

• 富裕空间的管理

  • box-pack
    
    • start 对于普通方向的boxes，左边缘的第一个子元素被放置在左侧（所有额外的空间放置后的最后一个子元素）。对于反向boxes，右边缘最后一个子元素放置在右侧（所有额外的空间放置前的第一个子元素）；
    • end 对于正常的方向的boxes，最后一个子元素的右边缘放置在右侧（所有额外的空间放置前的第一个子元素）。对于反向boxes，第一个孩子的左边缘放置在左侧（所有额外的空间放置后的最后一个子元素）；
    • center 额外的空间划分均匀的两半，前一半放置第一个子元素，另一半放置最后一个子元素；
    • justify 额外的空间平均分配给每个子元素
  • box-align
    
    • start 对于正常方向的boxes，每个子元素的顶部边缘放在沿box的顶部。反向箱，每个子元素的底边放在沿box的底部；
    • end 对于正常方向的boxes，每个子元素的顶部边缘放在沿box的底部。反向箱，每个子元素的底边放在沿box的顶部；
    • center 任何多余的空间被划分均匀，一半以上的子元素放在上面，剩下的子元素放在另一半；
    • baseline 如果box-orient是内嵌单轴或横向，所有的子元素都置于他们的基线对齐；
    • stretch 子元素拉伸以填充包含区块；

新版本容器属性

• 容器的布局方向：flex-direction属性改变主轴哪一根，属性决定主轴的方向（即项目的排列方向）

• 容器的排列方向：

  • 所谓的排列方向其实就是主轴上flex-direction属性的四个属性值的控制；
    
    • row（默认）：主轴为水平方向，起点在左方；
    • row-reverse：主轴为水平方向，起点在右端；
    • column：主轴为垂直方向，起点在上沿；
    • columen-reverse：主轴为垂直方向，起点在下沿。

• 富裕空间的管理：

  • justify-content：定义了项目在主轴上的对齐方式。

    • flex-start（默认值）：左对齐
      
      • flex-end：右对齐
      • center： 居中
      • space-between：两端对齐，项目之间的间隔都相等。
      • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

  • align-items：定义项目在交叉轴上如何对齐。

    • flex-start：交叉轴的起点对齐。
      
      • flex-end：交叉轴的终点对齐。
      • center：交叉轴的中点对齐。
      • baseline: 项目的第一行文字的基线对齐。
      • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

• 新版本新增容器属性

  • flex-wrap如果一条轴线排不下，如何换行。
    
    • nowrap（默认）：不换行。
    • wrap：换行，第一行在上方。
    • wrap-reverse：换行，第一行在下方。
  • align-content：属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
    
    • flex-start：与交叉轴的起点对齐。
    • flex-end：与交叉轴的终点对齐。
    • center：与交叉轴的中点对齐。
    • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
    • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
    • stretch（默认值）：轴线占满整个交叉轴。

容器属性的技术点

• flex技术点
  
  • 容器上的属性
    
    • 容器的布局方向：
      
      • old：box-orient;
      • new：flex-direction
    • 容器的排列方向：
      
      • old：box-direction;
      • new：flex-direction;
    • 富裕空间的管理
      
      • old：
        
        • box-pack
        • box-align
      • new：（更强大的富裕空间管理）
        
        • justify-content
        • align-items
• 注意点
  
  • 点一：
    
    • 容器的布局方向控制了主轴是哪一根；
    • 容器的排列方向控制了主轴的方向；
  • 点二：
    
    • 新版本对主轴的控制是通过flex-direction一个属性的四个属性值来实现的；
    • 老版本对主轴的控制是通过box-orient,box-direction两个属性的四个属性值来实现的；
  • 点三：
    
    • 新版本中的flex-direction会对赋予空间产生影响；
    • 老版本中box-direction不会对富裕空间产生影响；

项目上的属性

• 注意：弹性空间的管理，会把富裕空间按比例分配到项目上；

老版本项目属性

• webkit-box-flex：指定box的子元素是否灵活或固定的大小，默认值为0；

新版本项目属性

• order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0；
• align-self属性允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性；默认auto；
• flex-grow（拉伸因子） 用于设置或检索弹性盒的扩展比率；
  
  • flex-grow计算公式：
    
    • 富裕空间 = (容器大小 - 所有相邻项目flex-basis的总和)
    • 可扩展空间 = (可用空间/所有相邻项目flex-grow的总和)
    • 每项伸缩大小 = (伸缩基准值 + (可扩展空间 x flex-grow值))

• flex-shrink属性定义项目的缩小比例，默认为1；

  • flex-shrink： 每项flex收缩大小 = 伸展基准值 - (收缩比例 / 收缩比例总和 x 溢出的空间)–>并不是
  • 正确的计算方法：
    
    • 1.计算收缩因子与基准值乘的总和；
    • 2.计算收缩因数： 收缩因数=（项目的收缩因子*项目基准值）/第一步计算总和
    • 3.移除空间的计算：移除空间= 项目收缩因数 x 负溢出的空间
      

      //比如：一个容器wrap中的五个项目。
      <div class="item">1</div>
      <div class="item">22</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      //样式如下
      //五个项目的收缩因子和基准值50px都是默认值，
      
      #wrap .item{
      
          width: 50px;
          height: 50px;
          background: pink;
          text-align: center;
          line-height: 50px;
      }
      //第一个项目和第二个项目更改了收缩因子和项目基准值
      
      #wrap .item:nth-child(1){
      
          flex-basis: 100px;
          flex-shrink: 2;
      }
      
      #wrap .item:nth-child(2){
      
          flex-shrink: 5;
      }
      
      //计算方式：
      1.计算收缩因子与基准值乘的总和：2*100 + 5*50 + 3*50 =600
      2.计算收缩因数：收缩因数=（项目的收缩因子*项目基准值）/第一步计算总和    
          第一项收缩因数：2*100/600 = 0.33333
          第二项搜索因数：5*50/600 = 25/60
          其余项收缩因数：50/600= 5/60
      3.移除空间的计算：移除空间= 项目收缩因数 x 负溢出的空间   
          第一项所需的移除空间：1/3 * 100 = 33.33
          第二项所需的移除空间：25/60*100 = 41.67
          其余项所需的移除空间：5/60 *100 = 8.333

• flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间，默认为auto；

• flex
  
  • flex-grow, flex-shrink 和 flex-basis的简写
  • 属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
  • 快捷键：1；代表的值是1，1，0；

flex布局的几个常用属性（新老比较与汇总）