码迷,mamicode.com
首页 > 其他好文 > 详细

flex布局 居中

时间:2019-04-10 13:23:34      阅读:119      评论:0      收藏:0      [点我收藏+]

标签:src   tracking   ali   statistic   上下   tis   iss   的区别   ack   

 

display:flex;
justify-content: center;检查侧轴是否居中,比如古代竖着写字,检查字是否在每条竹简的中央。

技术图片

display:flex;
align-items: center;检查横轴是否居中,比如现代人是横着写字,检查字是否写在上下横线的中间。

技术图片

display:flex;
justify-content: center;

align-items: center;

技术图片两者都加上就变成了居中的效果。

---------------------------------------------------------------------------------------------------------------

 flex布局中align-items 和align-content的区别。align-items和align-content有相同的功能,不过不同点是它是用来让每一个单行的容器居中而不是让整个容器居中。align-content属性只适用于多行的flex容器。有点难懂,关键词:单行多行,看实例。

技术图片

对于只有一行的flex元素,align-content是没有效果的,如果改用align-items:center;则会达到预期的效果,如下图 

技术图片

但如果变成多行容器 使用align-items时效果如下

技术图片

使用align-content效果如下

技术图片

 

flex布局 居中

标签:src   tracking   ali   statistic   上下   tis   iss   的区别   ack   

原文地址:https://www.cnblogs.com/lsongyang/p/10682599.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!