CSS | flex-flow 属性

flex-flow 属性是弹性盒布局模块的子属性，也是 flex-wrap 和 flex-direction 的简写属性。
注意：当元素不是柔性项目时， flex 属性是无用的。

句法：

flex-flow: flex-direction flex-wrap;

flex-flow 属性的值：

• row nowrap：按文本方向排列行，wrap-flex 的默认值为 nowrap。它用于指定项目没有包装。它使项目包装在单行中。

  句法：

  flex-flow: row nowrap; 

  例子：

  
    
  
      
      
  
    
  
      
  GeeksforGeeks
      
  The flex-flow:row nowrap
      
  
          
  1
          
  2
          
  3
          
  4
          
  5
          
  6
      
  
    
  
  

  输出：
  

• row-reverse nowrap：将行与文本方向相反排列，wrap-flex 的默认值为 nowrap。它用于指定项目没有包装。它使项目包装在单行中。
  句法：

  flex-flow: row-reverse nowrap; 

  例子：

  
    
  
      
      
  
    
  
      
  GeeksforGeeks
      
  The flex-flow:row-reverse nowrap
      
  
          
  1
          
  2
          
  3
          
  4
          
  5
          
  6
      
  
    
  
  

  输出：
  

• column nowrap：与row相同，但从上到下，wrap-flex的默认值为nowrap。它用于指定项目没有包装。它使项目包装在单行中。
  句法：

  flex-flow: column nowrap; 

  例子：

  
    
  
      
      
  
    
  
      
  GeeksforGeeks
      
  The flex-flow:column nowrap
      
  
          
  1
          
  2
          
  3
          
  4
          
  5
          
  6
      
  
    
  
  

  输出：
  

• column-reverse nowrap：同row-reverse top to bottom，wrap-flex的默认值为nowrap。它用于指定项目没有包装。它使项目包装在单行中。
  句法：

  flex-flow: column-reverse nowrap; 

  例子：

  
    
  
      
      
  
    
  
      
  GeeksforGeeks
      
  The flex-flow:column-reverse nowrap
      
  
          
  1
          
  2
          
  3
          
  4
          
  5
          
  6
      
  
    
  
  

  输出：
  

• row wrap：按文本方向排列行，wrap 属性用于将 flex item 分成多行。它使 flex 项目根据 flex 项目宽度换行到多行
  句法：

  flex-flow: row wrap; 

  例子：

  
    
  
      
      
  
    
  
      
  GeeksforGeeks
      
  The flex-flow:row wrap
      
  
          
  1
          
  2
          
  3
          
  4
          
  5
          
  6
      
  
    
  
  

  输出：
  

• row-reverse wrap：它排列与文本方向相反的行，wrap 属性用于在 flex 项目换行时反转它们的流动。
  句法：

  flex-flow: row-reverse wrap; 

  例子：

  
    
  
      
      
  
    
  
      
  GeeksforGeeks
      
  The flex-flow:row-reverse wrap
      
  
          
  1
          
  2
          
  3
          
  4
          
  5
          
  6
      
  
    
  
  

  输出：
  

• 列换行：它排列与行相同但从上到下的行，wrap 属性用于在 flex 项目换行到新行时反转它们的流动。
  句法：

  flex-flow:column wrap; 

  例子：

  
    
  
      
      
  
    
  
      
  GeeksforGeeks
      
  The flex-flow:column wrap
      
  
          
  1
          
  2
          
  3
          
  4
          
  5
          
  6
      
  
    
  
  

  输出：
  

• column-reverse wrap:与row-reverse 从上到下排列相同的行。和 wrap 属性用于在 flex 项目换行时反转它们的流动。
  句法：

  flex-flow:column-reverse wrap; 

  例子：

  
    
  
      
      
  
    
  
      
  GeeksforGeeks
      
  The flex-flow:column-reverse wrap
      
  
          
  1
          
  2
          
  3
          
  4
          
  5
          
  6
      
  
    
  
  

  输出：
  

• row wrap-reverse:排列与文本方向相同的行，wrap-reverse 属性该属性用于在 flex 项目换行到新行时反转它们的流动。
  句法：

  flex-flow:row wrap-reverse; 

  例子：

  
    
  
      
      
  
    
  
      
  GeeksforGeeks
      
  The flex-flow:row wrap-reversep
      
  
          
  1
          
  2
          
  3
          
  4
          
  5
          
  6
      
  
    
  
  

  输出：
  

• row-reverse wrap-reverse:与文本方向相反的行和 wrap-reverse 属性 该属性用于在 flex 项目换行到新行时反转它们的流动。
  句法：

  flex-flow:row-reverse wrap-reverse; 

  例子：

  
    
  
      
      
  
    
  
      
  GeeksforGeeks
      
  The flex-flow:row-reverse wrap-reversep
      
  
          
  1
          
  2
          
  3
          
  4
          
  5
          
  6
      
  
    
  
  

  输出：
  

• column wrap-reverse:它排列与行相同的行，但从上到下。和 wrap-reverse 属性 该属性用于在 flex 项目换行到新行时反转它们的流动。
  句法：

  flex-flow:column wrap-reverse; 

  例子：

  
    
  
      
      
  
    
  
      
  GeeksforGeeks
      
  The flex-flow:column wrap-reverse
      
  
          
  1
          
  2
          
  3
          
  4
          
  5
          
  6
      
  
    
  
  

  输出：
  

• column-reverse wrap-reverse:与 row-reverse 一样的行从上到下和 wrap-reverse 属性 该属性用于在 flex 项目换行到新行时反转它们的流动。
  句法：

  flex-flow:column-reverse wrap-reverse; 

  例子：

  
    
  
      
      
  
    
  
      
  GeeksforGeeks
      
  The flex-flow:column-reverse wrap-reverse
      
  
          
  1
          
  2
          
  3
          
  4
          
  5
          
  6
      
  
    
  
  

  输出：
  

支持的浏览器：

• 谷歌浏览器 29.0
• 浏览器 11.0
• Mozila 火狐 28.0
• Safari 9.0
• 歌剧 17.0