flex布局方法（css3弹性伸缩布局教程）

.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的同学请关注php中文网CSS视频教程，众多css在线视频教程可以免费观看！

以上就是flex布局方法（css3弹性伸缩布局教程）的详细内容，更多请关注php中文网其它相关文章！