CSS-弹性布局2-交叉轴

4.5 align-items

该属性定义项目在交叉轴上如何对齐。

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

源代码

    
    
    


    

        
测试文字1
        
测试文字22
        
3
    

stretch运行结果

stretch运行结果

baseline运行结果

baseline运行结果

flex-start运行结果

flex-start运行结果

flex-end运行结果

flex-end运行结果

center运行结果

center运行结果

**4.7 align-content **
  该属性定义了多跟轴线的对齐方式。如果项目只有一根轴线，则该属性不起作用。

属性值	说明
stretch(默认值)	轴线占满整个交叉轴
flex-start	交叉轴的起点对齐
flex-end	交叉轴的终点对齐
center	交叉轴的中点对齐
space-between	与交叉轴两端对齐，轴线之间的间隔平均分布
space-around	每根轴线两侧的间隔都相等。所以轴线之间的间隔比边框的间隔大一倍

源代码：

    
    
    


    

        
1
        
2
        
3
        
4
        
5
    

stretch运行结果：

stretch运行结果

flex-start运行结果：

flex-start运行结果

flex-end运行结果：

flex-end运行结果

center运行结果：

center运行结果

space-between运行结果：

space-between运行结果

space-around运行结果：

space-around运行结果