Flex layout method (css3 elastic layout tutorial)

This article mainly introduces the flex layout of CSS3 elastic retractable layout in detail, which has certain reference value. Interested friends can refer to it

.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%; /* 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;
				}

Alignment setting: Set the element alignment in the container, rather than setting the element itself.

Unit: px pixels, relative to the resolution; em relative to the font size of the text within the current object; rem (root em) relative to the text font size of the root element of the web page.

Students who need to learn CSS please pay attention to php Chinese website CSS video tutorial, many css online video tutorials can be watched for free!

The above is the detailed content of Flex layout method (css3 elastic layout tutorial). For more information, please follow other related articles on the PHP Chinese website!