[CSS3] flex-grow 속성 데모
관련 기사:
1. [flex-grow] 속성 설명
2. [flex-shrink] 속성 프레젠테이션
3. [flex-basis] 속성 프레젠테이션
4. [flex] 속성 설명
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
/* reset.css */
* {
padding: 0;
margin: 0;
}
.bg {
position: absolute;
min-width: 100%;
min-height: 100%;
background-color: #bbb;
}
.center {
width: 1300px;
margin: 0 auto;
}
/* main.css */
.header {
padding: 10px;
}
.header h2 {
text-align: center;
}
.header p {
font-size: 1.2em;
font-weight: bold;
color: #fe2929;
}
.main-content {
position: relative;
padding: 10px;
}
.title {
margin-bottom: 10px;
}
.describe {
width: 100%;
margin-left: 10px;
background-color: #608ea5;
border-radius: 14px;
box-shadow: 4px 4px 4px 2px #8f8e8d, 2px 2px 2px 0px #000000;
}
/* */
.flex-container {
display: -webkit-flex;
display: flex;
}
/* */
.demo {
width: 800px;
height: 100px;
font-weight: bold;
background-color: white;
border: 5px solid black;
-webkit-transition: all 1s ease 0s;
transition: all 1s ease 0s;
}
/* */
.demo-item {
width: 100px;
}
.demo-item:nth-of-type(1) {
background-color: coral;
}
.demo-item:nth-of-type(2) {
background-color: lightblue;
}
.demo-item:nth-of-type(3) {
background-color: khaki;
}
.demo-item:nth-of-type(4) {
background-color: pink;
}
.demo-item:nth-of-type(5) {
background-color: lightgrey;
}
.demo-item:nth-of-type(6) {
background-color: lightgreen;
}
/* */
.tab-control {
margin-top: 10px;
padding: 5px;
width: 800px;
background-color: white;
border-radius: 14px;
box-shadow: 4px 4px 4px 2px #8f8e8d, 2px 2px 2px 0px #000000;
}
.tab-control:after {
box-shadow: 4px 4px 4px 2px #8f8e8d;
}
.tab-content {
position: relative;
width: 100%;
height: 200px;
}
/* */
.tab-header .tab-item-title {
padding: 10px 0;
width: 20%;
width: 132.2px\9;
font-weight: bold;
color: purple;
text-align: center;
line-height: 1;
border: 1px solid purple;
cursor: pointer;
}
.tab-header .tab-item-title+.tab-item-title{
margin-left: -1px;
}
.tab-header .tab-item-title:first-of-type {
border-top-left-radius: 14px;
}
.tab-header .tab-item-title:last-of-type {
border-top-right-radius: 14px;
}
.tab-header .tab-item-title.active {
color: white;
background-color: purple;
}
/* */
.tab-content .tab-item {
display: none;
position: absolute;
top: 0;
left: 0;
margin-top: -1px;
width: 100%;
height: 100%;
background-color: purple;
border: 1px solid purple;
border-radius: 0 0 14px 14px;
box-sizing: border-box;
}
.tab-content .tab-item.show {
display: block;
}
/* */
.dl {
padding: 10px;
color: white;
}
.dl-title {
font-size: 1.1em;
font-weight: bold;
margin-bottom: 5px;
}
.dl-item {
line-height: 1.4;
margin-left: 20px;
margin-bottom: 10px;
}
.dl-item:last-of-type {
margin-bottom: 0;
}
/* */
.range-wrap {
position: absolute;
margin-top: -2em;
margin-left: 250px;
font-weight: bold;
line-height: 1;
color: rgba(255, 255, 255, 0.5);
-webkit-animation: move 15s ease-in infinite;
animation: move 5s ease-in infinite;
}
/* */
.range-wrap input[type="range"] {
margin: 0 10px;
width: 300px;
cursor: pointer;
}
/* */
@keyframes move {
0% {
text-shadow: 3px 3px 5px rgb(255, 0, 0);}
16.7% {
text-shadow: 3px 3px 5px rgb(255, 0, 255);}
33.4% {
text-shadow: 3px 3px 5px rgb(0, 0, 255);}
50.1% {
text-shadow: 3px 3px 5px rgb(0, 255, 255);}
66.8% {
text-shadow: 3px 3px 5px rgb(0, 255, 0);}
83.5% {
text-shadow: 3px 3px 5px rgb(255, 255, 0);}
100% {
text-shadow: 3px 3px 5px rgb(255, 0, 0);}
}
@-webkit-keyframes move {
0% {
text-shadow: 3px 3px 5px rgb(255, 0, 0);}
16.7% {
text-shadow: 3px 3px 5px rgb(255, 0, 255);}
33.4% {
text-shadow: 3px 3px 5px rgb(0, 0, 255);}
50.1% {
text-shadow: 3px 3px 5px rgb(0, 255, 255);}
66.8% {
text-shadow: 3px 3px 5px rgb(0, 255, 0);}
83.5% {
text-shadow: 3px 3px 5px rgb(255, 255, 0);}
100% {
text-shadow: 3px 3px 5px rgb(255, 0, 0);}
}
style>
head>
<body>
<div class="bg">
<div class="center">
<div class="header">
<h2>"flex-grow" width h2>
<p>flex-grow( )， ， 。p>
div>
<hr />
<div class="main-content single">
<h3 class="title"> 、 h3>
<div class="range-wrap"> ：400px<input type="range" min="400" max="800" value="800" />800px【<output>output>】div>
<div class="flex-container">
<div class="item-box">
<div class="flex-container demo">
<div class="demo-item">Adiv>
<div class="demo-item">Bdiv>
<div class="demo-item">Cdiv>
<div class="demo-item">Ddiv>
<div class="demo-item">Ediv>
<div class="demo-item">Fdiv>
div>
<div class="tab-control">
<div class="tab-header flex-container">
<div class="tab-item-title active" data-val="0">flex-grow: 0;div>
<div class="tab-item-title" data-val="1">flex-grow: 1;div>
<div class="tab-item-title" data-val="0.05">flex-grow: 0.05;div>
<div class="tab-item-title" data-val="0.1">flex-grow: 0.1;div>
<div class="tab-item-title" data-val="0.5">flex-grow: 0.5;div>
<div class="tab-item-title" data-val="999">flex-grow: 999;div>
div>
<div class="tab-content">
<div class="tab-item show">
<dl class="dl">
<dt class="dl-title"> ：dt>
<dd class="dl-item">1. A ， ， ;dd>
<dd class="dl-item">2. = - = 800px - (100px)*6 = 200px;dd>
<dd class="dl-item">3. A = * = 200px*(0/100%) = 0px;dd>
<dd class="dl-item">4. A = + = 100px + 0px = 100px;dd>
dl>
div>
<div class="tab-item">
<dl class="dl">
<dt class="dl-title"> ：dt>
<dd class="dl-item">1. A = * = 200px*(1*100%) = 200px;dd>
<dd class="dl-item">2. A = + = 100px + 200px = 300px;dd>
dl>
div>
<div class="tab-item">
<dl class="dl">
<dt class="dl-title"> ：dt>
<dd class="dl-item">1. A = * = 200px*(0.05/100%) = 10px;dd>
<dd class="dl-item">2. A = + = 100px + 10px = 110px;dd>
dl>
div>
<div class="tab-item">
<dl class="dl">
<dt class="dl-title"> ：dt>
<dd class="dl-item">1. A = * = 200px*(0.1/100%) = 20px;dd>
<dd class="dl-item">2. A = + = 100px + 20px = 120px;dd>
dl>
div>
<div class="tab-item">
<dl class="dl">
<dt class="dl-title"> ：dt>
<dd class="dl-item">1. A = * = 200px*(0.5/100%) = 100px;dd>
<dd class="dl-item">2. A = + = 100px + 100px = 200px;dd>
dl>
div>
<div class="tab-item">
<dl class="dl">
<dt class="dl-title"> ：dt>
<dd class="dl-item">1. ≤ ， ≤ 100%， 【 】;dd>
<dd class="dl-item">2. ，"flex-grow: 999" 999/999 = 100%;dd>
<dd class="dl-item">3. A = * = 200px*(999/999) = 200px;dd>
<dd class="dl-item">4. A = + = 100px + 200px = 200px;dd>
dl>
div>
div>
div>
div>
<div class="describe">
<dl class="dl">
<dt class="dl-title"> ：dt>
<dd class="dl-item">1. ， ;dd>
<dd class="dl-item">2. ， ， ， "flex-shrink: 1;" 【 】， ;dd>
<dd class="dl-item">3. （ ） 【800px】;dd>
<dd class="dl-item">4. 【100px】;dd>
<dd class="dl-item">5. 【 】 = /100%;dd>
<dd class="dl-item">6. "flex-grow: 0;" 【 】;dd>
dl>
div>
div>
div>
<hr />
<div class="main-content equipartition">
<h3 class="title"> 、 h3>
<div class="range-wrap"> ：400px<input type="range" min="400" max="800" value="800" />800px【<output>output>】div>
<div class="flex-container">
<div class="item-box">
<div class="flex-container demo">
<div class="demo-item">Adiv>
<div class="demo-item">Bdiv>
<div class="demo-item">Cdiv>
<div class="demo-item">Ddiv>
<div class="demo-item">Ediv>
<div class="demo-item">Fdiv>
div>
<div class="tab-control">
<div class="tab-header flex-container">
<div class="tab-item-title active" data-val="0">flex-grow: 0;div>
<div class="tab-item-title" data-val="1">flex-grow: 1;div>
<div class="tab-item-title" data-val="0.05">flex-grow: 0.05;div>
<div class="tab-item-title" data-val="0.1">flex-grow: 0.1;div>
<div class="tab-item-title" data-val="0.5">flex-grow: 0.5;div>
<div class="tab-item-title" data-val="999">flex-grow: 999;div>
div>
<div class="tab-content">
<div class="tab-item show">
<dl class="dl">
<dt class="dl-title"> ：dt>
<dd class="dl-item">1. "flex-grow: 0;" ， ;dd>
<dd class="dl-item">2. = 0*6 = 0 < 1， = /100% = 0/100%;dd>
<dd class="dl-item">3. = * = 200px*(0/100%) = 0px;dd>
<dd class="dl-item">4. = - = 100px + 0px = 100px【 】;dd>
dl>
div>
<div class="tab-item">
<dl class="dl">
<dt class="dl-title"> ：dt>
<dd class="dl-item">1. = 1*6 = 6 > 1， = / = 1/6;dd>
<dd class="dl-item">2. = * = 200px*(1/6) ≈ 33.33px;dd>
<dd class="dl-item">3. = - = 100px + 33.33px = 133.33px;dd>
dl>
div>
<div class="tab-item">
<dl class="dl">
<dt class="dl-title"> ：dt>
<dd class="dl-item">1. = 0.05*6 = 0.3 < 1， = /100% = 0.05/100% = 1/20;dd>
<dd class="dl-item">2. = * = 200px*(1/20) = 10px;dd>
<dd class="dl-item">3. = + = 100px + 10px = 110px;dd>
dl>
div>
<div class="tab-item">
<dl class="dl">
<dt class="dl-title"> ：dt>
<dd class="dl-item">1. = 0.1*6 = 0.6 < 1， = /100% = 0.1/100% = 1/10;dd>
<dd class="dl-item">2. = * = 200px*(1/10) = 20px;dd>
<dd class="dl-item">3. = + = 100px + 20px = 120px;dd>
dl>
div>
<div class="tab-item">
<dl class="dl">
<dt class="dl-title"> ：dt>
<dd class="dl-item">1. = 0.5*6 = 3 < 1， = / = 0.5/3 = 1/6;dd>
<dd class="dl-item">2. = * = 200px*(1/6) ≈ 33.33px;dd>
<dd class="dl-item">3. = + = 100px + 33.33px = 133.33px;dd>
dl>
div>
<div class="tab-item">
<dl class="dl">
<dt class="dl-title"> ：dt>
<dd class="dl-item">1. = 999*6 = 5994 > 1， = / = 999/5994 = 1/6;dd>
<dd class="dl-item">2. = * = 200px*(1/6) ≈ 33.33px;dd>
<dd class="dl-item">3. = + = 100px + 33.33px = 133.33px;dd>
dl>
div>
div>
div>
div>
<div class="describe">
<dl class="dl">
<dt class="dl-title"> ：dt>
<dd class="dl-item">1. ： ， ;dd>
<dd class="dl-item">2. ≤ 1 ， = /100%， ≤ 100%【 】;dd>
<dd class="dl-item">3. ≥ 1 ， = / ， = 100%【 】;dd>
<dd class="dl-item">4. 【 】;dd>
<dd class="dl-item">5. ≤ 【 】， ≤ 100%【 】;dd>
dl>
div>
div>
div>
<hr />
<div class="main-content inequality">
<h3 class="title"> 、 h3>
<div class="range-wrap"> ：400px<input type="range" min="400" max="800" value="800" />800px【<output>output>】div>
<div class="flex-container">
<div class="item-box">
<div class="flex-container demo">
<div class="demo-item">Adiv>
<div class="demo-item">Bdiv>
<div class="demo-item">Cdiv>
<div class="demo-item">Ddiv>
<div class="demo-item">Ediv>
<div class="demo-item">Fdiv>
div>
<div class="tab-control">
<div class="tab-header flex-container">
<div class="tab-item-title active" data-val="0,0,0,0,0,0">0, 0, 0, 0, 0, 0div>
<div class="tab-item-title" data-val="0.1,0.1,0.1,0.1,0.2,0.3">0.1, 0.1, 0.1, 0.1, 0.2, 0.3div>
<div class="tab-item-title" data-val="1,1,1,1,2,3">1, 1, 1, 1, 2, 3div>
<div class="tab-item-title" data-val="0.1,0.1,0.1,0.1,0.3,0.3">0.1, 0.1, 0.1, 0.1, 0.3, 0.3div>
<div class="tab-item-title" data-val="1,1,1,1,3,3">1, 1, 1, 1, 3, 3div>
<div class="tab-item-title" data-val="333,333,333,333,999,999">333, 333, 333, 333, 999, 999div>
div>
<div class="tab-content">
<div class="tab-item show">
<dl class="dl">
<dt class="dl-title"> ：dt>
<dd class="dl-item">1. ， ;dd>
<dd class="dl-item">2. = 0*6 = 0 < 1， = /100% = 0/100%;dd>
<dd class="dl-item">3. = * = 200px*(0/100%) = 0px;dd>
<dd class="dl-item">4. = - = 100px + 0px = 100px【 】;dd>
dl>
div>
<div class="tab-item">
<dl class="dl">
<dt class="dl-title"> ：dt>
<dd class="dl-item">1. = 0.1*4 + 0.2 + 0.3 = 0.9 < 1， ：0.1/100%, 0.2/100%, 0.3/100%， 1/10, 1/5, 3/10;dd>
<dd class="dl-item">2. A~D = 200px*(1/10) = 20px，E = 200px*(1/5) = 40px，F = 200px*(3/10) = 60px;dd>
<dd class="dl-item">3. ， A~F ：120px, 120px, 120px, 120px, 140px, 160px;dd>
dl>
div>
<div class="tab-item">
<dl class="dl">
<dt class="dl-title"> ：dt>
<dd class="dl-item">1. = 1*4 + 2 + 3 = 9 > 1， ：1/9, 2/9, 3/9;dd>
<dd class="dl-item">2. A~D = 200px*(1/9) ≈ 22.22px，E = 200px*(2/9) ≈ 44.44px，F = 200px*(3/9) ≈ 66.67px;dd>
<dd class="dl-item">3. ， A~F ：122.22px, 122.22px, 122.22px, 122.22px, 144.44px, 166.67px;dd>
dl>
div>
<div class="tab-item">
<dl class="dl">
<dt class="dl-title"> ：dt>
<dd class="dl-item">1. = 0.1*4 + 0.3*2 = 1， ：0.1/1, 0.3/1， 1/10, 3/10;dd>
<dd class="dl-item">2. A~D = 200px*(1/10) = 20px，E、F = 200px*(3/10) = 60px;dd>
<dd class="dl-item">3. ， A~F ：120px, 120px, 120px, 120px, 160px, 160px;dd>
dl>
div>
<div class="tab-item">
<dl class="dl">
<dt class="dl-title"> ：dt>
<dd class="dl-item">1. = 1*4 + 3*2 = 10 > 1， ：1/10, 3/10;dd>
<dd class="dl-item">2. A~D = 200px*(1/10) = 20px，E、F = 200px*(3/10) = 60px;dd>
<dd class="dl-item">3. ， A~F ：120px, 120px, 120px, 120px, 160px, 160px;dd>
dl>
div>
<div class="tab-item">
<dl class="dl">
<dt class="dl-title"> ：dt>
<dd class="dl-item">1. = 333*4 + 999*2 = 3330 > 1， ：333/3330, 999/3330， 1/10, 3/10;dd>
<dd class="dl-item">2. A~D = 200px*(1/10) = 20px，E、F = 200px*(3/10) = 60px;dd>
<dd class="dl-item">3. ， A~F ：120px, 120px, 120px, 120px, 160px, 160px;dd>
dl>
div>
div>
div>
div>
<div class="describe">
<dl class="dl">
<dt class="dl-title"> ：dt>
<dd class="dl-item">1. ;dd>
<dd class="dl-item">2. ≤ 1 ， ;dd>
<dd class="dl-item">3. ≥ 1 ， ， ;dd>
<dd class="dl-item">4. ≤ 【 】， ≤ 100%【 】;dd>
<dd class="dl-item">5. ， ， 0px ;dd>
<dd class="dl-item">6. "flex-grow" ， ;dd>
dl>
div>
div>
div>
div>
div>
<script type="text/javascript">
;(function(doc) {
// DOM
var flexBox = doc.querySelectorAll('.item-box .demo'),
range = doc.querySelectorAll('.range-wrap input[type="range"]'),
output = doc.querySelectorAll('.range-wrap output');
//
var demo1 = doc.querySelector('.single .demo .demo-item'),
select1 = doc.querySelectorAll('.single .tab-control .tab-header .tab-item-title'),
content1 = doc.querySelectorAll('.single .tab-control .tab-content .tab-item');
//
var demo2 = doc.querySelectorAll('.equipartition .demo .demo-item'),
select2 = doc.querySelectorAll('.equipartition .tab-control .tab-header .tab-item-title'),
content2 = doc.querySelectorAll('.equipartition .tab-control .tab-content .tab-item');
//
var demo3 = doc.querySelectorAll('.inequality .demo .demo-item'),
select3 = doc.querySelectorAll('.inequality .tab-control .tab-header .tab-item-title'),
content3 = doc.querySelectorAll('.inequality .tab-control .tab-content .tab-item');
/* - - - - - - - - - - - - - - - - - - - - - - - - IE - - - - - - - - - - - - - - - - - - - - - - - - */
// 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';
}
for (var i = 0; i < ele.length; i++) {
output[i].value = ele[i].value + 'px';
addHandler(ele[i], type, function(i) {
return function() {
flexBox[i].style.width = ele[i].value + 'px';
output[i].value = ele[i].value + 'px';
}
}(i));
}
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
// ： data-val 【demo3】
function getVal(select) {
var valArr = []; // ，
// ，
for (var i = 0; i < select.length; i++) {
//
valArr.push(select[i].getAttribute('data-val').split(','));
}
//
return valArr;
}
//
function chgStyle(demo, select, content) {
var len = select.length;
for (var i = 0; i < len; i++) {
addHandler(select[i], 'click', function(i) {
return function() {
//
for (var j = 0; j < len; j++) {
select[j].className = select[j].className.replace(' active', '');
content[j].className = content[j].className.replace(' show', '');
}
//
select[i].className += ' active';
content[i].className += ' show';
//
if (demo === demo1) {
//
demo.style.flexGrow = select[i].getAttribute('data-val');
demo.style.webkitFlexGrow = select[i].getAttribute('data-val');
// data ：
// demo.style.flexGrow = select[i].dataset.val;
//
} else if (demo === demo2) {
//
for (var n = 0; n < demo.length; n++) {
demo[n].style.flexGrow = select[i].getAttribute('data-val');
demo[n].style.webkitFlexGrow = select[i].getAttribute('data-val');
}
//
} else {
// （demo3 ）
var val = getVal(select);
// （ ），
for (var n = 0, k = 0; n < demo.length, k < val[i].length; n++, k++) {
demo[n].style.flexGrow = val[i][k];
demo[n].style.webkitFlexGrow = val[i][k];
}
}
}
}(i));
}
}
function bindEvent() {
chgBox(range, 'input');
chgStyle(demo1, select1, content1);
chgStyle(demo2, select2, content2);
chgStyle(demo3, select3, content3);
}
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에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
