flex布局方法（css3Auto Scaling布局教程）

這篇文章主要為大家詳細介紹了CSS3Auto Scaling布局之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線上視頻教程可以免費觀看！