[CSS3] flex 속성 데모

[전송문: 완일봉 - Flex 레이아웃 튜토리얼: 문법편]
관련 기사:
1. [flex-grow] 속성 설명
2. [flex-shrink] 속성 프레젠테이션
3. [flex-basis] 속성 프레젠테이션
4. [flex] 속성 설명

<html>
<head>
	<meta charset="utf-8" />
	<title>title>
	<style type="text/css">
		body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul, li, p, a, input, form, textarea {
      
			padding: 0;
			margin: 0;
			font-family: 'Microsoft YaHei';
		}
		hr {
      
			margin: 20px 0;
			border: 1px dashed #aaa;
		}
		.bg {
      
			position: absolute;
			min-width: 100%;
			min-height: 100%;
			background-color: rgb(50, 50, 50);
		}
		/*      */
		.center {
      
			width: 80%;
			margin: 20px auto;
		}
		/*        */
		.flex-container {
      
			display: -webkit-flex;
			display: flex;
		}
		/*    */
		.describe {
      
			padding: 15px;
			color: white;
			background-color: chocolate;
			border-radius: 10px;
			border: 5px solid white;
			-webkit-animation: BoxShadow 10s linear 0s infinite;
			animation: BoxShadow 10s linear 0s infinite;
		}
		.describe dd {
      
			padding-left: 26px;
			margin-bottom: 10px;
			line-height: 1.4;
		}
		.describe dd:last-child {
      
			margin-bottom: 0;
		}
		/*     */
		.title {
      
			margin: 15px 0;
			font: 10em/1 fantasy;
			letter-spacing: 20px;
			text-align: center;
			color: white;
			-webkit-animation: TxtShadow 10s linear 0s infinite;
			animation: TxtShadow 10s linear 0s infinite;
		}

		/*      */
		.main-content>h3 {
      
			padding: 10px;
			margin-top: 0;
			text-align: center;
			line-height: 1;
			color: white;
			background-color: mediumorchid;
			border: 5px solid white;
			border-radius: 25px;
		}
		/*    ,         */
		.main-content .column {
      
			flex: 0 1 33.33%;
		}
		/*     */
		.main-content .line {
      
			margin: 0 20px;
			border: 1px dashed #aaa;
		}
		/*      */
		.main-content .column>h4 {
      
			text-align: center;
			line-height: 1;
			color: white;
		}
		/*    */
		.column .demo {
      
			margin: 10px 0;
			background-color: white;
			border: 4px solid black;
			box-shadow: 0px 0px 0px 1px white;
			box-sizing: border-box;
		}
		.column .demo .demo-item {
      
			width: 100px;
			height: 100px;
		}
		.column:first-child .demo .demo-item {
      
			background-color: coral !important;
			-webkit-flex: initial !important;
			flex: initial !important;
		}
		.column:not(.line) .demo .demo-item {
      
			background-color: lightblue;
			-webkit-flex: none;
			flex: none;
		}
		.column:last-child .demo .demo-item {
      
			background-color: khaki;
			-webkit-flex: auto;
			flex: auto;
		}
		.column .content {
      
			padding-left: 26px;
			margin-top: 10px;
			line-height: 1.2;
			color: white;
			background-color: #5260c0;
			border-radius: 10px;
			border: 2px solid white;
		}
		.column .content>li {
      
			margin: 5px 0;
		}

		/*      */
		.control {
      
			padding: 15px 60px;
			margin: 30px 0;
			font-weight: bold;
			color: white;
			border-radius: 50%;
			box-shadow: 0px -4px 0px 3px #ff4848;
		}
		/*      */
		.control .cur-width {
      
			font-size: 1.2em;
			text-align: center;
		}
		/*    */
		.control .range div {
      
			-webkit-flex: 0 1 100%;
			flex: 0 1 100%;
		}
		.control .range div:first-of-type,
		.control .range div:last-of-type {
      
			-webkit-flex: none;
			flex: none;
		}
		.control .range div:nth-child(2) {
      
			margin: 0 5px;
		}
		.control .range div input[type="range"] {
      
			width: 100%;
			cursor: pointer;
		}

		/*      */
		@keyframes BoxShadow {
      
			0% {
      box-shadow: 0 0 20px 4px rgb(255, 0, 0);}
			16.7% {
      box-shadow: 0 0 20px 4px rgb(255, 0, 255);}
			33.4% {
      box-shadow: 0 0 20px 4px rgb(0, 0, 255);}
			50.1% {
      box-shadow: 0 0 20px 4px rgb(0, 255, 255);}
			66.8% {
      box-shadow: 0 0 20px 4px rgb(0, 255, 0);}
			83.5% {
      box-shadow: 0 0 20px 4px rgb(255, 255, 0);}
			100% {
      box-shadow: 0 0 20px 4px rgb(255, 0, 0);}
		}
		@-webkit-keyframes BoxShadow {
      
			0% {
      box-shadow: 0 0 20px 4px rgb(255, 0, 0);}
			16.7% {
      box-shadow: 0 0 20px 4px rgb(255, 0, 255);}
			33.4% {
      box-shadow: 0 0 20px 4px rgb(0, 0, 255);}
			50.1% {
      box-shadow: 0 0 20px 4px rgb(0, 255, 255);}
			66.8% {
      box-shadow: 0 0 20px 4px rgb(0, 255, 0);}
			83.5% {
      box-shadow: 0 0 20px 4px rgb(255, 255, 0);}
			100% {
      box-shadow: 0 0 20px 4px rgb(255, 0, 0);}
		}
		/*      */
		@keyframes TxtShadow {
      
			0% {
      text-shadow: -4px -2px 4px rgb(255, 0, 0);}
			16.7% {
      text-shadow: -4px -2px 4px rgb(255, 0, 255);}
			33.4% {
      text-shadow: -4px -2px 4px rgb(0, 0, 255);}
			50.1% {
      text-shadow: -4px -2px 4px rgb(0, 255, 255);}
			66.8% {
      text-shadow: -4px -2px 4px rgb(0, 255, 0);}
			83.5% {
      text-shadow: -4px -2px 4px rgb(255, 255, 0);}
			100% {
      text-shadow: -4px -2px 4px rgb(255, 0, 0);}
		}
		@-webkit-keyframes TxtShadow {
      
			0% {
      text-shadow: -4px -2px 4px rgb(255, 0, 0);}
			16.7% {
      text-shadow: -4px -2px 4px rgb(255, 0, 255);}
			33.4% {
      text-shadow: -4px -2px 4px rgb(0, 0, 255);}
			50.1% {
      text-shadow: -4px -2px 4px rgb(0, 255, 255);}
			66.8% {
      text-shadow: -4px -2px 4px rgb(0, 255, 0);}
			83.5% {
      text-shadow: -4px -2px 4px rgb(255, 255, 0);}
			100% {
      text-shadow: -4px -2px 4px rgb(255, 0, 0);}
		}
	style>
head>
<body>
	<div class="bg">
		<div class="center">
			<dl class="describe">
				<dt>dt>
				<dd>1. flex-grow:             ,       ;dd>
				<dd>2. flex-shrink:             ,       ;dd>
				<dd>3. flex-basis:      ,   、   "width",   :flex-basis > width;dd>
			dl>
			<div class="title">flexdiv>
			<div class="main-content">
				<h3>    flex-grow、flex-shrink、flex-basis     "  "  ,      flex      h3>
				<div class="control">
					<div class="cur-width"><output>100%output>div>
					<div class="range flex-container">
						<div>width:0%div>
						<div><input type="range" min="0" max="100" value="100" />div>
						<div>100%;div>
					div>
				div>
				<div class="flex-container">
					<div class="column">
						<h4>【   】flex: initial;h4>
						<div class="demo flex-container">
							<div class="demo-item">  div>
						div>
						<ol class="content">
							<li>    "0 1 auto";li>
							<li>"0"    "flex-grow: 0;"li>
							<li>"1"    "flex-shrink: 1;"li>
							<li>"auto"    "flex-basis: auto;"li>
							<li> :       width,           ,      。li>
						ol>
					div>
					<div class="line">div>
					<div class="column">
						<h4>flex: none;h4>
						<div class="demo flex-container">
							<div class="demo-item">  div>
						div>
						<ol class="content">
							<li>    "0 0 auto";li>
							<li>"0"    "flex-grow: 0;"li>
							<li>"0"    "flex-shrink: 0;"li>
							<li>"auto"    "flex-basis: auto;"li>
							<li> :       width,         ,         。li>
						ol>
					div>
					<div class="line">div>
					<div class="column">
						<h4>flex: auto;h4>
						<div class="demo flex-container">
							<div class="demo-item">  div>
						div>
						<ol class="content">
							<li>    "1 1 auto";li>
							<li>"1"    "flex-grow: 1;"li>
							<li>"1"    "flex-shrink: 1;"li>
							<li>"auto"    "flex-basis: auto;"li>
							<li> :       width,          ,     。li>
						ol>
					div>
				div>
				<hr />
				<dl class="describe">
					<dt>dt>
					<dd>1. "flex: 0;" === "flex: 0 1 0%",       ,      0;dd>
					<dd>2. "flex: 1;" === "flex: 1 1 0%",          ,     ,        ;
						<br />【  】"flex: auto;"    ,         ,       ;dd>
					<dd>3. "flex: 0%" === "flex: 1;" === "flex: 1 1 0%;"dd>
					<dd>4. "flex: 100%" === "flex: 1 1 100%;"dd>
					<dd>5. "flex: 1 2;" === "flex: 1 2 0%;"dd>
				dl>
			div>
		div>
	div>
	<script type="text/javascript">
		;(function(doc) {
      
			var flexBox = doc.querySelectorAll('.column .demo');
			var range = doc.querySelector('.control .range input[type="range"]');
			var output = doc.querySelector('.control .cur-width output');

			//          IE
			var IEVersion = (function() {
      
				//       userAgent   
				var userAgent = navigator.userAgent;

				//    IE<11   
				var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1;

				//    IE Edge   
				var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; 
				var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;

				if (isIE) {
      
					var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
					reIE.test(userAgent);
					var fIEVersion = parseFloat(RegExp["$1"]);
					if(fIEVersion == 7) {
      
						//      ,IE5      7
						return 7;
					} else if (fIEVersion == 8) {
      
						return 8;
					} else if (fIEVersion == 9) {
      
						return 9;
					} else if (fIEVersion == 10) {
      
						return 10;
					} else {
      
						// IE  <=7
						return 6;
					}
				} else if (isEdge) {
      
					// edge
					return 'edge';
				} else if (isIE11) {
      
					// IE11
					return 11;
				} else {
      
					//   ie   
					return -1;
				}
			})();

			//        IE
			function addHandler(element, type, handler){
      
				if(element.addEventListener){
      
					element.addEventListener(type, handler, false);
				}else if(element.attachEvent){
      
					element.attachEvent('on' + type, handler);
				}else{
      
					element['on' + type] = handler;
				}
			}

			//       
			function chgBox(ele, type) {
      
				// IE   "input"  ,  "change"  
				if (IEVersion !== -1 && type === 'input') {
      
					type = 'change';
				}
				addHandler(ele, type, function() {
      
					for (var i = 0; i < flexBox.length; i++) {
      
						flexBox[i].style.width = ele.value + '%';
						output.value = ele.value + '%';
					}
				});
			}

			function bindEvent() {
      
				chgBox(range, 'input');
			}

			function init() {
      
				bindEvent();
			}

			init();

		})(document);
	script>
body>
html>

좋은 웹페이지 즐겨찾기