程序博客网 > 淘宝这么把排名搞前

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

来源：互联网发布：淘宝这么把排名搞前编辑：程序博客网时间：2024/05/16 17:13

当容器内的元素只有一行时，使用align-items会使这行元素居中。但是使用align-content没有效果

来上代码

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">* {margin: 0;padding: 0;}#div1 {margin: 30px auto;width: 100px;height: 60px;background-color: #909;display: flex;display: -webkit-flex;text-align: center;}.child {width: 30px;height: 20px;line-height: 20px;}.child1 {background-color: #f55;}.child2 {background-color: gray;}</style></head><body><div id="div1"><div class="child child1">1</div><div class="child child2">2</div></div></body></html>

在chrome下面是这样子的

对比一：

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

那么效果如下图：

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

那么效果如下图：

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

对比二：

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

.child {

width:80px;

}

效果如下图：

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

那么效果如下图：

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

那么效果如下图：

0 0

淘宝这么把排名搞前

淘宝这么把排名搞前

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子执业药师考试内容执业药师西药初级药师报名条件药师报考时间从业药师驻店药师报考条件湖北执业药师报名时间药师资格考试药师证报名时间执业药师考试用书执业药师考试报名网药师考试科目初级中药师报名职业中药师考试题库中药师就业前景中药师和执业中药师执业中药师证执业中药师招聘执业中药师培训学校执业药师中药师考试执业中药师培训机构中药师好还是西药师好执业中药师有用吗执业中药师准考证执业中药师和执业西药师执业中药师考试经验执业药师和执业中药师的区别执业中药师考试资格执业中药师成绩查询药剂师考试科目药剂师报考时间药剂师考试时间药剂师报名时间职业药剂师报考条件中药剂师中药怎么样医学教育网执业药师药学专业可以考执业中药师吗中药煲中药药店的中药