flex布局之弹性元素 - 作业

Home > List of blog posts > flex布局之弹性元素

Blogger Information

Blog 10

fans 0

comment 0

visits 6132

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>设置弹性元素的增长因子</title>
		<style>
			/*弹性容器通用样式*/
			.container {
				border: 2px dashed red;
				margin: 15px;
				background: #cdc;
			}


			/*弹性元素通用样式*/
			.item {
				box-sizing: border-box;
				border: 1px solid;
				padding: 20px;
				background: #ede;
			}

			/*块级弹性容器*/
			.flex {
				display: flex;
			}

			/*
		增长因子使用场景:
		1. 弹性元素设置了自定义宽度
		2. 弹性容器设置了自定义宽度
		3. 弹性元素总宽度在主轴上小于弹性容器的宽度,出现了多余空间
		4. 弹性容器不允许换行
		*/

			.container {
				width: 550px;
			}

			.item {
				/*基本宽度*/
				width: 100px;
			}

			/*增长因子默认值*/
			.demo1>.item {
				flex-grow: 0;
			}

			.demo2>.item:first-of-type {
				flex-grow: 0;
			}

			.demo1>.item:nth-of-type(2) {
				flex-grow: 0;
			}

			.demo2>.item:last-of-type {
				flex-grow: 1;
			}

			.demo3>.item:first-of-type {
				flex-grow: 1;
			}

			.demo3>.item:nth-of-type(2) {
				flex-grow: 1;
			}

			.demo3>.item:last-of-type {
				flex-grow: 3;
			}

			.demo4>.item:first-of-type {
				flex-grow: 0.5;
			}

			.demo4>.item:nth-of-type(2) {
				flex-grow: 0.5;
			}

			.demo4>.item:last-of-type {
				flex-grow: 1.5;
			}


			/*如果每个元素的宽度不一样, 是否适用以上计算公式呢?*/
			.demo5>.item:first-of-type {
				width: 120px;
				flex-grow: 2;
			}

			.demo5>.item:nth-of-type(2) {
				width: 150px;
				flex-grow: 2;
			}

			.demo5>.item:last-of-type {
				width: 180px;
				flex-grow: 6;
			}
		</style>
	</head>
	<body>
		<h1>flex-grow: 设置弹性元素增长因子</h1>

		<h3>(1): 所有弹性元素不增长,以原始宽度显示,增长因子为: 0(默认)</h3>
		<div class="container flex demo1">
			<span class="item">item1</span>
			<span class="item">item2</span>
			<span class="item">item3</span>
		</div>

		<h3>(2): 将全部剩余空间分配给指定弹性元素,例如: 第三个</h3>
		<div class="container flex demo2">
			<span class="item">item1</span>
			<span class="item">item2</span>
			<span class="item">item3</span>
		</div>

		<h3>(3): 全部剩余空间按增长因子在不同弹性元素间分配</h3>
		<div class="container flex demo3">
			<span class="item">item1</span>
			<span class="item">item2</span>
			<span class="item">item3</span>
		</div>

		<h3>(4): 增长因子支持小数, 因为是按增长比例分配</h3>
		<div class="container flex demo4">
			<span class="item">item1</span>
			<span class="item">item2</span>
			<span class="item">item3</span>
		</div>

		<h3>(5): 每个弹性元素宽度不同时, 同样适用以上分配规律</h3>
		<div class="container flex demo5">
			<span class="item">item1</span>
			<span class="item">item2</span>
			<span class="item">item3</span>
		</div>
	</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

2.设置弹性元素的缩减因子

实例

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>设置弹性元素的缩减因子</title>
		<style>
			/*弹性容器通用样式*/
			.container {
			    border: 2px dashed red;
			    margin: 15px;
			    background: #cdc;
			}
			
			
			/*弹性元素通用样式*/
			.item {
			    box-sizing: border-box;
			    border: 1px solid;
			    padding: 20px;
			    background: #ede;
			}
			
			/*块级弹性容器*/
			.flex {
			    display: flex;
			}
			/*
			缩减因子使用场景:
			1. 弹性元素设置了自定义宽度
			2. 弹性容器设置了自定义宽度
			3. 弹性元素总宽度在主轴上超过了弹性容器的宽度
			4. 弹性容器不允许换行
			*/
			
			.container {
			    width: 550px;
			}
			.item {
			    /*基本宽度*/
			    width: 250px;
			}
			
			/*
			所有元素不缩减,以原始宽度显示
			设置缩减因为为: 0
			*/
			.demo1 > .item {
			    flex-shrink: 0;
			}
			
			
			/*
			所有元素自动缩放适应容器宽度且不换行显示
			设置缩减因子: 1 (默认值/初始值)
			*/
			.demo2 > .item {
			    flex-shrink: 1;
			}
			
			/*当三个元素的缩减因为子不相等时*/
			
			.demo3 > .item:first-of-type {
			    flex-shrink: 1;
			}
			.demo3 > .item:nth-of-type(2) {
			    flex-shrink: 2;
			}
			.demo3 > .item:last-of-type {
			    flex-shrink: 3;
			}
			
			/*缩减因子也可以是小数,只要大于就可以了, 负数无效*/
			
			.demo4 > .item:first-of-type {
			    flex-shrink: 0.2;
			}
			.demo4 > .item:nth-of-type(2) {
			    flex-shrink: 0.3;
			}
			.demo4 > .item:last-of-type {
			    flex-shrink: 0.5;
			}
			
			/*
			每个元素的宽度不一样时：
			  1. 计算缩减因子的的缩小比例: 等待缩减空间 / 每个弹性元素的宽度与缩减因子乘积的总和
			  2. 计算每个元素的缩减量: 元素宽度 * ( 缩减因子 * 缩减因子的缩减比例)
			*/
			.demo5 > .item:first-of-type {
			    width: 220px;
			    flex-shrink: 2;
			}
			
			.demo5 > .item:nth-of-type(2) {
			    width: 250px;
			    flex-shrink: 2;
			}
			.demo5 > .item:last-of-type {
			    width: 280px;
			    flex-shrink: 6;
			}
		</style>
	</head>
	<body>
		<h1>flex-shrink: 设置弹性元素缩减因子</h1>

		<h3>(1): 所有弹性元素不缩减,以原始宽度显示,缩减因子为: 0</h3>
		<div class="container flex demo1">
			<span class="item">item1</span>
			<span class="item">item2</span>
			<span class="item">item3</span>
		</div>

		<h3>(2): 所有弹性元素自适应容器宽度且不换行,缩减因子: 1 (默认)</h3>
		<div class="container flex demo2">
			<span class="item">item1</span>
			<span class="item">item2</span>
			<span class="item">item3</span>
		</div>

		<h3>(3): 当三个弹性元素的缩减因为子不相等时</h3>
		<div class="container flex demo3">
			<span class="item">item1</span>
			<span class="item">item2</span>
			<span class="item">item3</span>
		</div>

		<h3>(4): 缩减因子也可以是小数,只要大于就可以</h3>
		<div class="container flex demo4">
			<span class="item">item1</span>
			<span class="item">item2</span>
			<span class="item">item3</span>
		</div>

		<h3>(5): 当每个弹性元素宽度不一样时, 完全是另一道风景线</h3>
		<div class="container flex demo5">
			<span class="item">item1</span>
			<span class="item">item2</span>
			<span class="item">item3</span>
		</div>
	</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

3.设置弹性元素的基准尺寸

实例

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>设置弹性元素的基准尺寸</title>
		<style>
			/*弹性容器通用样式*/
			.container {
			    border: 2px dashed red;
			    margin: 15px;
			    background: #cdc;
			}
			
			
			/*弹性元素通用样式*/
			.item {
			    box-sizing: border-box;
			    border: 1px solid;
			    padding: 20px;
			    background: #ede;
			}
			
			/*块级弹性容器*/
			.flex {
			    display: flex;
			}
			
			/*
			元素基准使用场景:
			flex-basis 属性定义了在分配多余空间之前,
			项目占据的主轴空间（main size),
			浏览器根据这个属性，计算主轴是否有多余空间
			
			1. 没有为弹性元素设置宽度
			2. 为元素设置的宽度不满足当前需求
			3.为每个弹性元素设置初始值/状态
			*/
			
			.container {
			    width: 550px;
			}
			
			/*在未设置元素宽度时,以内容宽度显示*/
			.demo1 > .item {
			    flex-basis: content;
			}
			
			/*存在自定义元素宽度时,则以该宽度显示*/
			.demo2 > .item {
			    width: 100px;
			}
			
			/*自动状态下, 将设置权限交给浏览器*/
			/*如果元素设置了宽度, 就按自定义宽度显示*/
			/*如果元素的宽度也是auto,或者没有定义, 就按内容宽度content显示*/
			.demo3 > .item {
			    flex-basis: auto;
			}
			
			/*当元素存在自定义宽度和flex-basic基准宽度时,以哪个为准呢?*/
			/*以flex-basic属性值为弹性元素的基准值*/
			.demo4 > .item {
			    width: 100px;
			    flex-basis: 150px;
			}
			
			
			/*元素基准宽度支持百分比*/
			.demo5 > :first-child {
			    flex-basis: 20%;
			}
			
			.demo5 > :nth-child(2) {
			    flex-basis: 30%;
			}
			
			.demo5 > :last-child {
			    flex-basis: 50%;
			}
		</style>
	</head>
	<body>
		<h1>flex-basis: 设置弹性元素的基准尺寸</h1>

		<h3>(1): 在未设置弹性元素宽度时, 以内容宽度显示</h3>
		<div class="container flex demo1">
			<span class="item">item1</span>
			<span class="item">item2</span>
			<span class="item">item3</span>
		</div>

		<h3>(2): 存在自定义元素宽度时,则以该宽度显示</h3>
		<div class="container flex demo2">
			<span class="item">item1</span>
			<span class="item">item2</span>
			<span class="item">item3</span>
		</div>

		<h3>(3): 自动状态下, 由浏览器根据预设值自行判定</h3>
		<div class="container flex demo3">
			<span class="item">item1</span>
			<span class="item">item2</span>
			<span class="item">item3</span>
		</div>

		<h3>(4): 当元素存在自定义宽度与基准宽度时, 以基准宽度为准 </h3>
		<div class="container flex demo4">
			<span class="item">item1</span>
			<span class="item">item2</span>
			<span class="item">item3</span>
		</div>

		<h3>(5): 元素基准宽度支持百分比设置 </h3>
		<div class="container flex demo5">
			<span class="item">item1</span>
			<span class="item">item2</span>
			<span class="item">item3</span>
		</div>
	</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>简化弹性元素的基本设置</title>
		<style>
			/*弹性容器通用样式*/
			.container {
				border: 2px dashed red;
				margin: 15px;
				background: #cdc;
			}


			/*弹性元素通用样式*/
			.item {
				box-sizing: border-box;
				border: 1px solid;
				padding: 20px;
				background: #ede;
			}

			/*块级弹性容器*/
			.flex {
				display: flex;
			}

			.container {
				width: 550px;
			}

			/*
		flex: 如果有多个值,则按以下顺序:
		flex: flex-grow flex-shrink flex-basis
		默认状态: flex: 0 1 auto;
		含义: 不增长, 可缩减, 宽度自动
		*/

			/*根据width,height计算,并且允许缩减大小适应容器*/
			.demo1>.item {
				width: 100px;
				height: 60px;
				flex: initial;

				/*等价于初始值*/
				flex: 0 1 auto;
			}


			.demo2>.item {
				width: 100px;
				height: 60px;
				flex: auto;

				/*等价于*/
				/*flex: 1 1 auto;*/
			}

			.demo3>.item {
				width: 100px;
				height: 60px;
				flex: none;

				/*等价于: */
				flex: 0 0 auto;
			}

			/*一个数值代表增长因子*/
			.demo4>.item {
				width: 100px;
				height: 60px;
				flex: 1;
				/*等价于*/
				/*如果有多余空间,允许元素在主轴上伸缩*/
				/*flex-grow: 1;*/

				/*等价于:*/
				/*flex: 1 1 auto;*/
			}

			.demo5>.item {
				width: 100px;
				height: 60px;
				flex: 1 0 200px;
			}

			.demo6>.item {
				width: 100px;
				height: 60px;
			}

			.demo6>.item:first-of-type {
				flex: 1 1 50%;
			}

			/*
		实际上最后一个参数: 50%是无效的, 任何数都不会发生变化
		因为第一个是1,表示可增长, 即将剩余空间全部分配给它,其它二个默认增长因子为0
		*/
		</style>
	</head>
	<body>
		<h1>简化弹性元素的基本设置</h1>

		<h3>(1): 根据宽度计算,允许缩减适应容器</h3>
		<div class="container flex demo1">
			<span class="item">item1</span>
			<span class="item">item2</span>
			<span class="item">item3</span>
		</div>

		<h3>(2): 根据宽度计算,元素完全弹性以适应容器</h3>
		<div class="container flex demo2">
			<span class="item">item1</span>
			<span class="item">item2</span>
			<span class="item">item3</span>
		</div>

		<h3>(3): 元素完全失去弹性, 以原始大小呈现</h3>
		<div class="container flex demo3">
			<span class="item">item1</span>
			<span class="item">item2</span>
			<span class="item">item3</span>
		</div>

		<h3>(4): 一个数值表示增长因子,其它值默认: flex: 1 1 auto</h3>
		<div class="container flex demo4">
			<span class="item">item1</span>
			<span class="item">item2</span>
			<span class="item">item3</span>
		</div>

		<h3>(5): 第三个有具体数值时, 以它为计算标准</h3>
		<div class="container flex demo5">
			<span class="item">item1</span>
			<span class="item">item2</span>
			<span class="item">item3</span>
		</div>

		<h3>(6): 单独设置某一个元素弹性大小 </h3>
		<div class="container flex demo6">
			<span class="item">item1</span>
			<span class="item">item2</span>
			<span class="item">item3</span>
		</div>
	</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

二、flex属性的用法

三、align-self、order的用法

align-self：

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>align-self的用法</title>
		<style>
			#main {
				width: 220px;
				height: 300px;
				border: 1px solid black;
				display: flex;
				align-items: flex-start;
			}

			#main div {
				flex: 1;
			}

			#myBlueDiv {
				align-self: center;
			}
		</style>
	</head>
	<body>

		<div id="main">
			<div style="background-color:coral;">红色</div>
			<div style="background-color:lightblue;" id="myBlueDiv">蓝色</div>
			<div style="background-color:lightgreen;">带有更多内容的绿色 div</div>
		</div>

		<p><b>注意:</b> align-self 属性重写了容器的 align-items 属性。</p>
		<p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 align-items 属性。</p>
		<p><b>注意:</b> Safari 7.0 及更新版本通过 -webkit-align-items 属性支持该属性。</p>

	</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

order：

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>order用法</title>
		<style>
			#main {
				width: 400px;
				height: 150px;
				border: 1px solid #c3c3c3;
				display: flex;
			}

			#main div {
				width: 70px;
				height: 70px;
			}

			div#myRedDIV {
				order: 2;
			}

			div#myBlueDIV {
				order: 4;
			}

			div#myGreenDIV {
				order: 3;
			}

			div#myPinkDIV {
				order: 1;
			}
		</style>
	</head>
	<body>

		<div id="main">
			<div style="background-color:coral;" id="myRedDIV"></div>
			<div style="background-color:lightblue;" id="myBlueDIV"></div>
			<div style="background-color:lightgreen;" id="myGreenDIV"></div>
			<div style="background-color:pink;" id="myPinkDIV"></div>
		</div>

		<p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 order 属性。</p>
		<p><b>注意:</b> Safari 6.1 及更新版本通过 -webkit-order 属性支持该属性。</p>

	</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

四、使用flex实现圣杯布局

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用flex实现圣杯布局</title>
		<style>
			header,footer{
				height: 40px;
				background-color: #00FFFF;
				text-align: center;
				line-height: 40px;/* 使文字上下居中 */
			}
			main{
				/*使盒子大小不受内边距与边框的影响*/
				box-sizing: border-box;
				border: 1px solid black;
				display: flex;
			}
			article{
				min-height: 500px;
				width: 100%;
				background-color: #90EE90;
				order: 2;
			}
			main>aside:first-of-type{
				width: 240px;
				background-color: #FFA500;
				order: 1;
			}
			main>aside:last-of-type{
				width: 240px;
				background-color: #FFA500;
				order: 3;
			}
		</style>
	</head>
	<body>
		<header>头部</header>
		<main>
			<article>主体</article>
			<aside>左侧</aside>
			<aside>右侧</aside>
		</main>
		<footer>底部</footer>
	</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

Correction status：qualified

Teacher's comments：代码整齐 , 手写认真, 坚持

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

html标签（10.29）

2019-10-30 13:20:38