align-content 和 align-items 的区别

两个对齐的内容和对准项在Flexbox的横axis.Cross轴函数是依赖于柔性方向和运行垂直于主轴线，如果柔性方向是行或行反向然后横-axis 是垂直的，如果 flex-direction 是 column 或 column-reverse，则横轴是水平的。

align-content	align-items
This property of flex-box aligns flex-lines with respect to each other along the cross-axis.	This property of flex-box aligns the flex-items within flex-line along the cross-axis
This property works only when the “flex-wrap:” property is set to wrap	This property works even when the “flex-wrap:” property is not set to wrap
This property has no effect when the number of flex-line is 1.	This property does not depend on the number of flex-lines.
The align-content property accepts 6 different values: flex-start:lines packed to the start of the container flex-end:lines packed to the end of the container center:lines packed to the center of the container space-between:lines evenly distributed; the first line is at the start of the container while the last one is at the end space-around:lines evenly distributed with equal space between stretch(Default):lines stretch to take up the remaining space	The align-items property accepts 5 different values: flex-start:cross-start margin edge of the items is placed on the cross-start line flex-end:cross-end margin edge of the items is placed on the cross-end line center:items are centered in the cross-axis baseline:items are aligned such as their baselines align stretch(Default):stretch to fill the container

句法：

• 对齐内容：

  element{
  align-content:stretch | center | flex-start | flex-end | space-between | space-around | initial | inherit;
  // CSS Property
  }

• 对齐项目：

  element{
  align-items:stretch | center | flex-start | flex-end | baseline | initial | inherit;
  // CSS Property
  }

对齐内容示例

  

  
  

  

  

    

      
F
    
    

      
LE
    
    

      
X
    
    

      
ST
    
    

      
A
    
    

      
RT
    
  
  

    

      
F
    
    

      
LE
    
    

      
X
    
    

      
E
    
    

      
N
    
    

      
D
    
  
  

    

      
C
    
    

      
E
    
    

      
N
    
    

      
T
    
    

      
E
    
    

      
R
    
  
  

    

      
SP
    
    

      
AC
    
    

      
EB
    
    

      
ET
    
    

      
WE
    
    

      
EN
    
  
  

    

      
SP
    
    

      
AC
    
    

      
E
    
    

      
AR
    
    

      
OU
    
    

      
ND
    
  
  

    

      
S
    
    

      
T
    
    

      
R
    
    

      
E
    
    

      
T
    
    

      
CH
    
  

  

输出

对齐项目的示例

  

  
  

  

  

    

      
F


      
LE
    
    

      
X
    
    

      
ST


      
A
    
    

      
RT
    
  
  

    

      
F


      
LE
    
    

      
X
    
    

      
E


      
N
    
    

      
D
    
  
  

    

      
C


      
E
    
    

      
N
    
    

      
T


      
E
    
    

      
R
    
  
  

    

      
BA


      
S
    
    

      
E
    
    

      
LI


      
N
    
    

      
E
    
  
  

    

      
S


      
T
    
    

      
R
    
    

      
E


      
T
    
    

      
CH
    
  

  

输出