Home  >  Article  >  Web Front-end  >  Flex layout method (css3 elastic layout tutorial)

Flex layout method (css3 elastic layout tutorial)

零下一度
零下一度Original
2017-04-21 17:20:192664browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn