flex佈局方法（css3彈性伸縮佈局教學）

這篇文章主要為大家詳細介紹了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的同學請關注php中文網CSS影片教學，眾多css線上影片教學可以免費觀看！

以上是flex佈局方法（css3彈性伸縮佈局教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！