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

转自链接



    
    Document
    


        
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

你可能感兴趣的:(flex布局中align-content和align-items的区别)