【CSS3】flex-shrink属性演示

最新推荐文章于 2023-06-19 00:48:52 发布
最新推荐文章于 2023-06-19 00:48:52 发布
阅读量416 收藏
点赞数
分类专栏： CSS3 # 盒子模型练习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45389633/article/details/108240242
版权

【传送门：阮一峰 - 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>
iuukai
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css弹性盒子-------桃园三兄弟之：flex-grow、flex-shrink、flex-basis详解
m0_37058714的博客
06-21 8万+
flex-grow、flex-shrink、flex-basis三个属性的作用：在flex布局中，父元素在不同宽度下，子元素是如何分配父元素空间的。(注意：这三个属性都是在子元素上设置的，下面小编要讲的是父元素，指以flex布局的元素(display:flex))小编这里先教一下大家如何快速记住这三个属性：首先是   flex-basis  ，basis英文意思是&lt;主要成分&gt;，所以他和...
flex-shrink: 0；防止元素变形
见贤思齐焉，见不贤内自省
02-22 882
flex-shrink: 0;防止元素变形
flex简写属性介绍
qq_40147756的博客
06-19 1315
flex用于设置：弹性元素如何，以适应其弹性容器中可用的空间。由以上3个属性组成。
flex弹性布局教程-05项目属性flex-shrink
晴空闲云
09-21 2207
本篇介绍了 flex-shrink 属性，flow-grow 用于放大，那么 flex-shrink 就是缩小了，其缩小规则和 flex-grow 类似。 阅读时间约10~15分钟，文字虽多，但主要都是例子。
flex布局可能碰到的坑1
ppx2017的博客
08-13 1万+
flex布局非常好用，但在开发过程中可能会碰到的一些坑 1、内容超出容器 大致情况是：在一个设置了display:flex布局的大容器A中并排放置两个子容器，并且子容器设置flex:1，子容器中都有一个元素包含一段文本，这段文本设置了不换行并且显示省略号的样式，当文本过长的时候，子容器会被撑开，如下效果： 相关代码： &lt;view class='hot-content-box'&...
深入理解css3中的flex-grow、flex-shrink、flex-basis （转）
weixin_33800593的博客
03-10 1880
转自：http://zhoon.github.io/css3/2014/08/23/flex.html 感谢他的整理 flex为css的布局带来了新的时代，作为一个重构工程师，我们再也不用局限于float和position，特别是在移动端，我们可以利用flex轻松实现以往float和psition很难实现甚至是无法实现的布局。 本文主要讲解flex的三个子属性：flex-grow、f...
CSS3 Flexbox中flex-shrink属性的用法示例介绍
09-25
当flex items的大小超过了flex container时， 各个flex item的压缩比例，下面有个不错的教程，大家可以参考下
详解关于flex-shrink如何计算的冷知识
09-22
本篇文章给大家带来的内容是关于flex-shrink如何计算？flex-shrink的计算方法介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助
详解flex布局中flex-grow与flex-shrink的计算方式
11-21
CSS 中的 Flex(弹性布局) 可以很灵活的控制网页的布局，其中决定 Flex 布局内项目宽度/高度的是三个属性： flex-basis, flex-grow, flex-shrink. flex-basis 　flex-basis 决定了项目占据主轴的空间，除非使用 box-...
手把手教你CSS Flex布局
Kepler_II的博客
03-29 306
前言 之前做项目，关于布局方面没怎么深入研究过，好多页面都是能用定位就用定位，能用百分比就用百分比，导致很多地方，看似对齐了，但是就很别扭，这几天又被一个布局折磨了很久。于是痛定思痛，总结一下自己思想上的问题。 自己之前没把 CSS 的相关问题当回事，心里总是理所应当的认为，样式什么时候用到随便百度一下就行，这种想法的后果就是，页面风格很僵硬，不同分辨率的显示器适配很差，写页面的时候，也很莫名其妙，明明我写了某个样式，就是没效果，到头来还是自己跟自己过不去。 感觉跟我有一样想法的同学肯定不少，不过不要紧，知
从零开始打造云端AI管理调度平台（四）如何设计主页_1
weixin_42144330的博客
03-23 1968
上期我们聊到如何创建我们的第一个APP并在浏览器中显示出来，这期我们将详细介绍如何设计自己的主页。
flex-shrink
弱智de克星
01-18 920
flex-shrink
flex布局实现导航tab切换 内容溢出滚动
weixin_44406888的博客
01-22 1250
js实现移动端tab切换 内容溢出滚动效果 使用flex布局 实现了一个基础的导航tab滚动效果, 根据自己的需求去完善动效。 分享给大家供大家参考，具体如下： - 功能演示 - HTML <body> <div class="main"> <div class="nav-box"> <!-- <ul class="nav-scroll" onClick="onClickNav(this)"> -->
CSS3弹性盒子布局-第三集
unbreakablec的博客
02-01 326
CSS3弹性盒子布局 四、弹性子元素属性 属性 描述 order 设置弹性盒子的子元素排列顺序。 flex-grow 设置或检索弹性盒子元素的扩展比率。 flex-shrink 指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。 flex-basis 用于设...
Flex弹性布局（一）——三个参数
qq_47200594的博客
10-19 4004
Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为Flex布局。 在使用Flex布局时要先定义该盒子为Flex布局，有两种表现方式： 第一种（直接在div上设置样式） <div style="display:flex;margin: auto;width:400px;height:6rem;border: 0.1rem solid black"> <div style="flex: 3 0 200px
Flex布局新旧混合写法详解（兼容微信）
02-05 823
flex是个非常好用的属性，如果说有什么可以完全代替 float 和 position ，那么肯定是非它莫属了（虽然现在还有很多不支持 flex的浏览器）。然而在移动开发中，本来绝大多数浏览器（包括安卓2.3以上的自带浏览器）都支持的属性，偏偏有个例外，就是国产某某X5内核神器（不知哪个版本的webkit，仅支持 display:box），自主研发这东西也不好多说什么了，下面入正题。 首先还
Html——flex布局 弹性布局
chhhhh0403的博客
05-14 1万+
以下文章主要探讨 HTML5 中 CSS3 提供的用来实现未来响应式弹性伸缩布局方案。 一、flex布局的语法 块级元素 ：display: flex ———— 将容器盒模型作为块级弹性伸缩盒显示 行内元素 ：display: inline-flex ———— 将容器盒模型作为内联级弹性伸缩盒显示 设置flex布局后，flex item的float、clear和vertical-align 属性都失效 flex布局默认为横向 二、容器属性 flex的排列属性： 元素名称 说明
记一次flex-shrink的问题
qq_34258791的博客
02-01 489
mobile的轮播图的错误显示问题，大概也就是320宽的屏幕，4张图，每张图显示只有80px 1.flex-shrink的默认值是1，所以算法也就是 originImageWidth(我的测试图为750) - width * flex-shrink/weight * totalWidth 2.以一张750图为例，在宽度是320的屏幕里，可套公式： 750 - 750*1/3000 * 2680 =...
谷歌浏览器调用webkitRequestFullScreen方法后，设置的背景色只填充可视范围问题。
热门推荐
pgLi
06-07 1万+
1、问题根因    谷歌浏览器下默认对全屏设置的背景色是白色，而当前body是不设置高度的或者设置的是100%，导致背景色只对可视范围生效。2、解决思路    设置谷歌浏览器下，背景色，覆盖掉默认的颜色    //各个浏览器下 全屏状态下背景色设置 :-webkit-full-screen { background-color: @content-bg !important; } :-moz-...
css的flex-shrink属性
最新发布
09-01
flex-shrink属性是CSS中用于控制弹性盒子元素在空间不足时缩小的程度。它接受一个数字值作为参数，默认值为1。 当容器的可用空间不足以容纳所有弹性盒子元素时，浏览器会根据各个弹性盒子元素的flex-shrink值来确定...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值