flex布局中align-content和align-items的区别

转自链接

    
    
    


        

        
1
        
2
    

在chrome下面是这样子的

image

对比一：

如果在#div1样式里面添加align-items:center;

那么效果如下图：

image

如果在#div1样式里面添加align-content:center;

image

结论：在单行显示中align-content是没用的

对比二：

把两个伸缩项目的width做一下改变

.child {
width:80px;
}

效果如下图：

image

如果在#div1样式里面添加align-items:center;

那么效果如下图：

image

如果在#div1样式里面添加align-content:center;

那么效果如下图：

image