这篇文章主要为大家详细介绍了css3弹性伸缩布局之flex布局，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
.container{align-items: center;justify-content: center;display: flex;background: white url(image/baby.jpg) no-repeat center;background-size: auto 100%;}.text{display: flex; align-items: center;height: 3rem;color: white;font-family: helvetica, sans-serif;font-size: 1.5rem;font-weight: bold;text-transform: uppercase;text-shadow:0 0 1.2rem hsla(0,100%,100%,.4);box-shadow: 0 0 1.5rem hsla(0,100%,0%,.4);border-radius: .5rem;}
适应各种版本：
html {height: 100%;font-size: 62.5%; /* 10px with default settings */} body {margin: 0;height: 100%;width: 100%; /* width needed for Firefox *//* old flexbox - Webkit and Firefox. For backwards compatibility */display: -webkit-box; display: -moz-box;/* middle-aged flexbox. Needed for IE 10 */display: -ms-flexbox;/* new flexbox. Chrome (prefix), Opera, upcoming browsers without */display: -webkit-flex;display: flex;/* old flexbox: box-* */-webkit-box-align: center; -moz-box-align: center;/* middle flexbox: flex-* */-ms-flex-align: center;/* new flexbox: various property names */-webkit-align-items: center;align-items: center;-webkit-box-pack: center; -moz-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;background: white url(image/baby.jpg) no-repeat center;background-size: auto 100%;} /* flexbox added below to show it works with anonymous boxes (e.g. text) as well It is not needed to center the heading itself. Rest of the styles are just to make the demo pretty and can be ignored. */h1 {display: -webkit-box; display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-align: center; -moz-box-align: center;-ms-flex-align: center;-webkit-justify-content: center;justify-content: center;-webkit-box-pack: center; -moz-box-pack: center;-ms-flex-pack: center;-webkit-align-items: center;align-items: center;height: 10rem;padding: 0 3rem;/* background-color: hsla(0, 100%, 0%, .9); */color: white;font-family: helvetica, sans-serif;font-size: 5rem; /* font shorthand doesn’t work with rem in IE10 */text-transform: uppercase;text-shadow: 0 0 1.2rem hsla(0, 100%, 100%, .4);box-shadow: 0 0 1.5rem hsla(0, 100%, 0%, .4);border-radius: .5rem;}
对齐设置：在容器中设置元素对齐，而不是设置元素本身。
单位：px 像素，相对于分辨率；em 相对于当前对象内文本的字体尺寸；rem（root em）相对于网页根元素文本字体尺寸。
需要学习CSS的同学请关注创想鸟CSS视频教程，众多css在线视频教程可以免费观看！
立即学习“前端免费学习笔记（深入）”；
以上就是flex布局方法（css3弹性伸缩布局教程）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1608537.html
微信扫一扫 
支付宝扫一扫 
