【传送门：阮一峰 - Flex 布局教程：语法篇】
相关文章：
-
1.【flex-grow】属性演示
-
2.【flex-shrink】属性演示
-
3.【flex-basis】属性演示
-
4.【flex】属性演示
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.bg {
position: absolute;
min-width: 100%;
min-height: 100%;
background-color: #bbb;
}
.center {
width: 1300px;
margin: 0 auto;
}
.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) {
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');
var IEVersion = (function() {
var userAgent = navigator.userAgent;
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1;
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) {
return 7;
} else if (fIEVersion == 8) {
return 8;
} else if (fIEVersion == 9) {
return 9;
} else if (fIEVersion == 10) {
return 10;
} else {
return 6;
}
} else if (isEdge) {
return 'edge';
} else if (isIE11) {
return 11;
} else {
return -1;
}
})();
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) {
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));
}
}
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');
} 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 {
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>
