大家好，欢迎来到IT知识分享网。

1、flex-grow属性

2、flex-shrink属性

3、flex-basis属性

4、flex-wrap属性

5、flex-direction属性

6、flex-flow属性

1、flex-grow属性

一个数字，规定项目将相对于其他灵活的项目进行扩展的量。flex-grow 属性用于设置或检索弹性盒子的扩展比率。

CSS 语法

flex-grow: number | initial | inherit;

属性值

2、flex-shrink属性

flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和（width1）大于容器（widthcontain）的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。默认宽度的超出部分（width1-widthcontain）会根据不同元素指定的flex-shrink值占所有元素的比例进行分配，然后用自身width1减去按比例分配的那个值。

具体程序实例：具体程序实例

注意：flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩，（也即是，大家均摊超出容器需要shrink补偿的那部分）

3、flex-basis属性

flex-basis 属性用于设置或检索弹性盒伸缩基准值。

CSS语法：flex-basis:number | auto |initial |inherit;

js设置flex-basis属性值：（1）element.style.flexBasis=”200px”;   (2)element.style[“flexBasis”]=”200px”;

4、flex-wrap属性

flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。默认值：nowrap不换行

 示例：

 容器宽度是200px，每个元素的宽度是50px，有六个元素，总宽度已经大于了200px，此时使用了flex-wrap属性，可以进行换行显示。

倘若不设置换行，那么display：flex；效果如下：

显示的效果和flex-grow:0,flex-shrink:1;flex-basis:auto;等效。

5、flex-direction属性

flex-direction 属性规定灵活项目的方向。默认值是：row

CSS 语法

flex-direction: row | row-reverse | column | column-reverse | initial | inherit;

实例： 

 重头戏来了：根据flex-direction和justify-content以及align-items进行居中定位。

演示实例：

 
 
 

  
  
 
   
 
    
 
   
 
   
 
    
 
     <div class="container"> 
    
 
   
  
  
 
   
 
    
 
   
 
   
 
    
 
     <div>A 
     </div> 
    
 
   
  
  
 
   
 
    
 
   
 
   
 
    
 
     <div>B 
     </div> 
    
 
   
  
  
 
   
 
    
 
   
 
   
 
    
 
     </div> 
    
 
   
 
 
 
 
 

（1）不设置方向display：flex，默认按文本流方向进行排列，由于子元素是两个div的块级元素，所以各占一行。

 （2）设置display:flex;之后默认主轴方向是row，块级元素按照这个主轴进行布局。

 设置为flex-direction：column；之后，此时主轴就是column方向。块级元素按照这个主轴进行布局。

（3）display:flex结合align-items:center;实现左侧垂直居中。align-items是以侧轴为定位参照基准；justify-content是以主轴为参考基准。这里使用了display：flex没有显示定义flex-direction,默认是flex-direction：row；那么侧轴与其垂直相交， align-items:cente的效果就显示为下：

（4） display:flex;结合justify-content:center;实现水平居中，这里使用了display：flex没有显示定义flex-direction,默认是flex-direction：row；justify-content是以主轴为参考基准。

（5）display:flex；flex-direction：column；align-items：center；试想一下：此时两个子元素A,B，的布局是什么样的？

flex-direction：column；表明此时的主轴的column反向；那么此时的侧轴方向是row。

align-items：center；是以侧轴为参考基准

 （6）实现垂直水平居中

简单总结：flex-direction，主要用来创建主轴，表明主轴线方向，然后根据主轴线和侧轴线来决定使用justif-content还是align-items。 

6、flex-flow属性

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。

flex-flow 属性用于设置或检索弹性盒模型对象的子元素排列方式。

flex-direction 属性规定灵活项目的方向。

flex-wrap 属性规定灵活项目是否拆行或拆列。

CSS 语法

flex-flow: flex-direction flex-wrap | initial | inherit;

 补充知识点： flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

实例：下例中flex仅仅只有一个参数，所以设置的是flex-grow的属性，flex的默认值是： 0 1 auto

 
 
 

  
  
 
   
 
    
 
   
 
   
 
    
 
     #main { 
    
 
   
  
  
 
   
 
    
 
   
 
   
 
    
 
     display:flex; 
    
 
   
  
  
 
   
 
    
 
   
 
   
 
    

      } 
    
 
   
  
  
 
   
 
    
 
   
 
   
 
    
 
     #main 
     div{ 
    
 
   
  
  
 
   
 
    
 
   
 
   
 
    
 
     flex: 
     1; 
     /*这里的flex设置为1，等价于flex-grow：1*/ 
    
 
   
  
  
 
   
 
    
 
   
 
   
 
    

      } 
    
 
   
 
 
 
 
 

CSS 语法

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

属性值

文章转自https://blog.csdn.net/qq_39207948/article/details/85956861