[CSS3] 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>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
【Vue 엔지니어가 만든다】 절대 실패하지 않는 CSS 네비게이션 메뉴 정리 13선이 기사에 기재된 디자인 코드는 모두 자유롭게 사용해 주셔서 괜찮습니다 (필자가 작성했기 때문에) 프로젝트에 넣어보다 충실한 디자인으로 해 주면 ○ 움직임은 아래 이미지처럼 느껴집니다 1. 헤더로 사용하기 쉬운 간단...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
