Flex Layout Method (CSS3 stretch layout tutorial)

This article is mainly for everyone to introduce the flex layout of CSS3 flexible layout, with a certain reference value, interested in small partners can refer to

. 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;}

Adapt to various versions:

 HTML {height:100%;font-size:62.5%;/* 10px with default settings */} body {margin:0;height:100%;width:100%;/* WID Th needed for Firefox *//* old Flexbox-webkit and Firefox. For backwards compatibility */display:-webkit-box; Display:-moz-box;/* middle-aged flexbox. Needed for IE */display:-ms-flexbox;/* new Flexbox. Chrome (prefix), Opera, upcoming browsers without */display:-webkit-flex;display:flex;/* old flexbox:box-* */-webkit-bo X-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 isn't needed to center the HEA      Ding itself.  Rest of the styles is just to make the demo pretty and can is 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;

Alignment settings: Set element alignment in the container instead of setting the element itself.

Units: px pixels, relative to the resolution; the font size of the text within the current object, and the REM (root em) text font size for the Web root element.

Students who need to learn CSS, please pay attention to the PHP Chinese web CSS video tutorial, many CSS online video tutorials can be viewed for free!