Flex具有哪些容器属性?

　　Flex容器具有以下属性：

　　1.display: 定义元素的显示类型为flex。必须将其设置为flex才能启用Flex容器属性。

　　2.flex-direction: 定义了Flex容器中主轴的方向。可以是row(水平方向，左到右)、row-reverse(水平方向，右到左)、column(垂直方向，上到下)或column-reverse(垂直方向，下到上)。

　　3.flex-wrap: 定义了Flex容器中的项目是否应该换行。可以是nowrap(不换行)、wrap(换行)或wrap-reverse(反向换行)。

　　4.justify-content: 定义了Flex容器中项目在主轴上的对齐方式。可以是flex-start(靠近起始位置对齐)、flex-end(靠近结束位置对齐)、center(居中对齐)、space-between(两端对齐，项目之间的间隔相等)、space-around(每个项目周围的间隔相等)或space-evenly(每个项目周围和之间的间隔相等)。

　　5.align-items: 定义了Flex容器中项目在交叉轴上的对齐方式。可以是flex-start(靠近起始位置对齐)、flex-end(靠近结束位置对齐)、center(居中对齐)、baseline(基线对齐)或stretch(拉伸填充)。

　　6.align-content: 定义了多行项目在交叉轴上的对齐方式。适用于多行Flex容器。可以是flex-start(靠近起始位置对齐)、flex-end(靠近结束位置对齐)、center(居中对齐)、space-between(两端对齐，行之间的间隔相等)、space-around(每行周围的间隔相等)或stretch(拉伸填充)。

　　下面是一个使用Flex容器属性的简单示例代码：

  


  

    
1
    
2
    
3
    
4
    
5
    
6
  

    

        
        
        
        
    
    

        
        
            
        
        
        
        
        
        
        
        
        
    
  
  

        
        
        
        
        
        
        
    

　　在上面的示例中，一个具有Flex容器属性的div元素被创建，并包含了六个具有相同样式的项目。Flex容器的属性被应用于父容器(.container)，使其成为一个Flex容器。每个项目(.item)具有相同的宽度和高度，以及灰色的背景。

　　该示例使用了以下Flex容器属性：

　　·display: flex：将容器设置为Flex容器。

　　·flex-direction: row：主轴方向设置为水平方向(从左到右)。

　　·flex-wrap: wrap：项目可以换行。

　　·justify-content: center：项目在主轴上居中对齐。

　　·align-items: center：项目在交叉轴上居中对齐。

　　·align-content: space-around：多行项目在交叉轴上具有相等的间隔。

　　这些属性的组合使得项目在容器中水平居中对齐，并在多行的情况下具有均匀的间隔。