【CSS3】flex-shrink属性演示

【传送门:阮一峰 - Flex 布局教程:语法篇


相关文章:
1.【flex-grow】属性演示
2.【flex-shrink】属性演示
3.【flex-basis】属性演示
4.【flex】属性演示
<!DOCTYPE html>
<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 linear 0s;
			transition: all 1s linear 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;
		}

		/* 阻止 例1 中除 A 外的元素的收缩行为 */
		.single .demo-item+.demo-item {
			flex-shrink: 0;
		}
		/* 缩小选项标题的字体大小 */
		.main-content:not(.inequality) .tab-header .tab-item-title:nth-of-type(3) {
			font-size: 0.9em;
		}

		/* 滑键部分 */
		.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 10s linear infinite;
			animation: move 10s linear 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-shrink" 收缩后 width 的计算</h2>
				<p>flex-shrink(缩小),是当弹性容器不足以放下所有弹性子元素时,弹性子元素的收缩行为。</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"></div>
							<div class="demo-item">B</div>
							<div class="demo-item">C</div>
							<div class="demo-item">D</div>
							<div class="demo-item">E</div>
							<div class="demo-item">F</div>
						</div>
						<div class="tab-control">
							<div class="tab-header flex-container">
								<div class="tab-item-title active" data-val="1">flex-shrink: 1;</div>
								<div class="tab-item-title" data-val="0">flex-shrink: 0;</div>
								<div class="tab-item-title" data-val="0.05">flex-shrink: 0.05;</div>
								<div class="tab-item-title" data-val="0.1">flex-shrink: 0.1;</div>
								<div class="tab-item-title" data-val="0.5">flex-shrink: 0.5;</div>
								<div class="tab-item-title" data-val="999">flex-shrink: 999;</div>
							</div>
							<div class="tab-content">
								<!-- flex-shrink: 1; -->
								<div class="tab-item show">
									<dl class="dl">
										<dt class="dl-title">【以弹性容器 "width=400px" 为例】此时:</dt>
										<dd class="dl-item">1. "flex-shrink: 1;" 是所有弹性子元素的默认收缩行为,但此例已将其余项设置为 "flex-shrink: 0;";</dd>
										<dd class="dl-item">2. 溢出空间 = 容器宽度 - 所有弹性子元素宽度总和 = 400px - (100px)*6 = |-200px| = 200px;</dd>
										<dd class="dl-item">3. A项缩减宽度 = 溢出空间 * 收缩占比 = 200px*(1/100%) = 200px;</dd>
										<dd class="dl-item">4. A项缩减后的宽度 = 初始宽度 - 缩减宽度 = 100px - 200px &lt; 0px【最小为 0,所以取 0】; </dd>
										<dd class="dl-item">5. 但实际为 "16px",原因是被内容宽度撑开,此项内容为一个 "16px" 的中文字符 "中"; </dd>
									</dl>
								</div>
								<!-- flex-shrink: 0; -->
								<div class="tab-item">
									<dl class="dl">
										<dt class="dl-title">【以弹性容器 "width=400px" 为例】此时:</dt>
										<dd class="dl-item">1. "flex-shrink: 0;" 表示弹性元素在容器空间不足时,不进行收缩,而这样会撑破容器;</dd>
										<dd class="dl-item">2. A项缩减宽度 = 溢出空间 * 收缩占比 = 200px*(0/100%) = 0px;</dd>
										<dd class="dl-item">3. A项缩减后的宽度 = 初始宽度 - 缩减宽度 = 100px - 0px = 100px【不收缩】; </dd>
									</dl>
								</div>
								<!-- flex-shrink: 0.05; -->
								<div class="tab-item">
									<dl class="dl">
										<dt class="dl-title">【以弹性容器 "width=400px" 为例】此时:</dt>
										<dd class="dl-item">1. 此例已将其余项设置为 "flex-shrink: 0;";</dd>
										<dd class="dl-item">2. A项缩减宽度 = 溢出空间 * 收缩占比 = 200px*(0.05/100%) = 10px;</dd>
										<dd class="dl-item">3. A项缩减后的宽度 = 初始宽度 - 缩减宽度 = 100px - 10px = 90px; </dd>
									</dl>
								</div>
								<!-- flex-shrink: 0.1; -->
								<div class="tab-item">
									<dl class="dl">
										<dt class="dl-title">【以弹性容器 "width=400px" 为例】此时:</dt>
										<dd class="dl-item">1. 此例已将其余项设置为 "flex-shrink: 0;";</dd>
										<dd class="dl-item">2. A项缩减宽度 = 溢出空间 * 收缩占比 = 200px*(0.1/100%) = 20px;</dd>
										<dd class="dl-item">3. A项缩减后的宽度 = 初始宽度 - 缩减宽度 = 100px - 20px = 80px; </dd>
									</dl>
								</div>
								<!-- flex-shrink: 0.5; -->
								<div class="tab-item">
									<dl class="dl">
										<dt class="dl-title">【以弹性容器 "width=400px" 为例】此时:</dt>
										<dd class="dl-item">1. 此例已将其余项设置为 "flex-shrink: 0;";</dd>
										<dd class="dl-item">2. A项缩减宽度 = 溢出空间 * 收缩占比 = 200px*(0.5/100%) = 100px;</dd>
										<dd class="dl-item">3. A项缩减后的宽度 = 初始宽度 - 缩减宽度 = 100px - 100px = 0px; </dd>
										<dd class="dl-item">4. 但实际为 "16px",原因是被内容宽度撑开,此项内容为一个 "16px" 的中文字符 "中"; </dd>
									</dl>
								</div>
								<!-- flex-shrink: 999; -->
								<div class="tab-item">
									<dl class="dl">
										<dt class="dl-title">【以弹性容器 "width=400px" 为例】此时:</dt>
										<dd class="dl-item">1. 此例已将其余项设置为 "flex-shrink: 0;";</dd>
										<dd class="dl-item">2. 收缩空间总和 ≤ 溢出空间,收缩量总和 ≤ 1,收缩空间总和不会大于溢出空间【详情请看下例】;</dd>
										<dd class="dl-item">3. 例如此项,"flex-shrink: 999;" 所占溢出空间的占比为 999/999 = 100%;</dd>
										<dd class="dl-item">4. 所以,A项缩减宽度 = 溢出空间 * 收缩占比 = 200px*(999/999) = 200px;</dd>
										<dd class="dl-item">5. A项缩减后的宽度 = 初始宽度 - 缩减宽度 = 100px - 200px &lt; 0px,实际宽度由内容撑开; </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. 若容器空间充足或存在剩余部分,则弹性子元素不会产生收缩行为,即使规定了属性值;</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. 【此例】已将 B、C、D、E、F 设置为 "flex-shrink: 0;";</dd>
							<dd class="dl-item">7. 【自身完全缩减】项目最大收缩空间 = 自身宽度,即,缩减后宽度 = 0,若存在内容,则由内容撑开【IE有毛病】;</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">A</div>
							<div class="demo-item">B</div>
							<div class="demo-item">C</div>
							<div class="demo-item">D</div>
							<div class="demo-item">E</div>
							<div class="demo-item">F</div>
						</div>
						<div class="tab-control">
							<div class="tab-header flex-container">
								<div class="tab-item-title active" data-val="1">flex-shrink: 1;</div>
								<div class="tab-item-title" data-val="0">flex-shrink: 0;</div>
								<div class="tab-item-title" data-val="0.05">flex-shrink: 0.05;</div>
								<div class="tab-item-title" data-val="0.1">flex-shrink: 0.1;</div>
								<div class="tab-item-title" data-val="0.5">flex-shrink: 0.5;</div>
								<div class="tab-item-title" data-val="999">flex-shrink: 999;</div>
							</div>
							<div class="tab-content">
								<!-- flex-shrink: 1; -->
								<div class="tab-item show">
									<dl class="dl">
										<dt class="dl-title">【以弹性容器 "width=400px" 为例】此时:</dt>
										<dd class="dl-item">1. "flex-shrink: 1;" 是所有弹性子元素的默认收缩行为,容器空间不足均会等比收缩以适应容器空间;</dd>
										<dd class="dl-item">2. 因为 收缩量总和 = 1*6 = 6 &gt; 1,所以 收缩占比 = 收缩量/收缩量总和 = 1/6;</dd>
										<dd class="dl-item">3. 各项缩减宽度 = 溢出空间 * 收缩占比 = 200px*(1/6) ≈ 33.33px;</dd>
										<dd class="dl-item">4. 各项缩减后的宽度 = 初始宽度 - 缩减宽度 = 100px - 33.33px = 66.67px;</dd>
									</dl>
								</div>
								<!-- flex-shrink: 0; -->
								<div class="tab-item">
									<dl class="dl">
										<dt class="dl-title">【以弹性容器 "width=400px" 为例】此时:</dt>
										<dd class="dl-item">1. 当 "flex-shrink: 0;" 时,表示不进行收缩;</dd>
										<dd class="dl-item">2. 因为 收缩量总和 = 0*6 = 0 &lt; 1,所以 收缩占比 = 收缩量/100% = 0/100%;</dd>
										<dd class="dl-item">2. 各项缩减宽度 = 溢出空间 * 收缩占比 = 200px*(0/100%) = 0px;</dd>
										<dd class="dl-item">3. 各项缩减后的宽度 = 初始宽度 - 缩减宽度 = 100px - 0px = 100px【不收缩】;</dd>
									</dl>
								</div>
								<!-- flex-shrink: 0.05; -->
								<div class="tab-item">
									<dl class="dl">
										<dt class="dl-title">【以弹性容器 "width=400px" 为例】此时:</dt>
										<dd class="dl-item">1. 因为 收缩量总和 = 0.05*6 = 0.3 &lt; 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 = 90px;</dd>
									</dl>
								</div>
								<!-- flex-shrink: 0.1; -->
								<div class="tab-item">
									<dl class="dl">
										<dt class="dl-title">【以弹性容器 "width=400px" 为例】此时:</dt>
										<dd class="dl-item">1. 因为 收缩量总和 = 0.1*6 = 0.6 &lt; 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 = 80px;</dd>
									</dl>
								</div>
								<!-- flex-shrink: 0.5; -->
								<div class="tab-item">
									<dl class="dl">
										<dt class="dl-title">【以弹性容器 "width=400px" 为例】此时:</dt>
										<dd class="dl-item">1. 因为 收缩量总和 = 0.5*6 = 3 &gt; 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 = 66.67px;</dd>
									</dl>
								</div>
								<!-- flex-shrink: 999; -->
								<div class="tab-item">
									<dl class="dl">
										<dt class="dl-title">【以弹性容器 "width=400px" 为例】此时:</dt>
										<dd class="dl-item">1. 因为 收缩量总和 = 999*6 = 5994 &gt; 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 = 66.67px;</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. 若收缩量总和 &lt; 1,则容器会被撑破【存在溢出空间未被压缩,只能撑破容器】;</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">A</div>
							<div class="demo-item">B</div>
							<div class="demo-item">C</div>
							<div class="demo-item">D</div>
							<div class="demo-item">E</div>
							<div class="demo-item">F</div>
						</div>
						<div class="tab-control">
							<div class="tab-header flex-container">
								<div class="tab-item-title active" data-val="1,1,1,1,1,1">1, 1, 1, 1, 1, 1</div>
								<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.3</div>
								<div class="tab-item-title" data-val="1,1,1,1,2,3">1, 1, 1, 1, 2, 3</div>
								<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.3</div>
								<div class="tab-item-title" data-val="1,1,1,1,3,3">1, 1, 1, 1, 3, 3</div>
								<div class="tab-item-title" data-val="333,333,333,333,999,999">333, 333, 333, 333, 999, 999</div>
							</div>
							<div class="tab-content">
								<!-- 1, 1, 1, 1, 1, 1 -->
								<div class="tab-item show">
									<dl class="dl">
										<dt class="dl-title">【以弹性容器 "width=400px" 为例】此时:</dt>
										<dd class="dl-item">1. 弹性元素默认收缩行为,各项等比收缩;</dd>
										<dd class="dl-item">2. 因为 收缩量总和 = 1*6 = 6 &gt; 1,所以 收缩占比 = 收缩量/收缩量总和 = 1/6;</dd>
										<dd class="dl-item">3. 各项缩减宽度 = 溢出空间 * 收缩占比 = 200px*(1/6) ≈ 33.33px;</dd>
										<dd class="dl-item">4. 各项缩减后的宽度 = 初始宽度 - 缩减宽度 = 100px - 33.33px = 66.67px;</dd>
									</dl>
								</div>
								<!-- 0.1, 0.1, 0.1, 0.1, 0.2, 0.3 -->
								<div class="tab-item">
									<dl class="dl">
										<dt class="dl-title">【以弹性容器 "width=400px" 为例】此时:</dt>
										<dd class="dl-item">1. 因为 收缩量总和 = 0.1*4 + 0.2 + 0.3 = 0.9 &lt; 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 缩减后的宽度分别为:80px, 80px, 80px, 80px, 60px, 40px;</dd>
									</dl>
								</div>
								<!-- 1, 1, 1, 1, 2, 3 -->
								<div class="tab-item">
									<dl class="dl">
										<dt class="dl-title">【以弹性容器 "width=400px" 为例】此时:</dt>
										<dd class="dl-item">1. 因为 收缩量总和 = 1*4 + 2 + 3 = 9 &gt; 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 缩减后的宽度分别为:77.78px, 77.78px, 77.78px, 77.78px, 55.56px, 33.33px;</dd>
									</dl>
								</div>
								<!-- 0.1, 0.1, 0.1, 0.1, 0.3, 0.3 -->
								<div class="tab-item">
									<dl class="dl">
										<dt class="dl-title">【以弹性容器 "width=400px" 为例】此时:</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 缩减后的宽度分别为:80px, 80px, 80px, 80px, 40px, 40px;</dd>
									</dl>
								</div>
								<!-- 1, 1, 1, 1, 3, 3 -->
								<div class="tab-item">
									<dl class="dl">
										<dt class="dl-title">【以弹性容器 "width=400px" 为例】此时:</dt>
										<dd class="dl-item">1. 因为 收缩量总和 = 1*4 + 3*2 = 10 &gt; 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 缩减后的宽度分别为:80px, 80px, 80px, 80px, 40px, 40px;</dd>
									</dl>
								</div>
								<!-- 333, 333, 333, 333, 999, 999 -->
								<div class="tab-item">
									<dl class="dl">
										<dt class="dl-title">【以弹性容器 "width=400px" 为例】此时:</dt>
										<dd class="dl-item">1. 因为 收缩量总和 = 333*4 + 999*2 = 3330 &gt; 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 缩减后的宽度分别为:80px, 80px, 80px, 80px, 40px, 40px;</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. 当项目【自身完全缩减】时,若无内容,则缩减后宽度为 0,若存在内容,则由内容撑开【IE有毛病】;</dd>
							<dd class="dl-item">6. 收缩行为的元素,最大宽度为初始宽度,即缩减 0px 的空间;</dd>
							<dd class="dl-item">7. "flex-shrink" 属性,可撑破容器【由未被压缩的溢出部分撑破】;</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.flexShrink = select[i].getAttribute('data-val');
								demo.style.webkitFlexShrink = select[i].getAttribute('data-val');

								// 获取 data 的另一种方式:
								// demo.style.flexShrink = select[i].dataset.val;
							// 多项同值扩展
							} else if (demo === demo2) {
								// 遍历弹性子元素设置样式
								for (var n = 0; n < demo.length; n++) {
									demo[n].style.flexShrink = select[i].getAttribute('data-val');
									demo[n].style.webkitFlexShrink = 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.flexShrink = val[i][k];
									demo[n].style.webkitFlexShrink = 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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值