search

博客列表 >flex布局之弹性元素

flex布局之弹性元素

程煜
程煜原创
2019年11月06日 22:47:40536浏览

一.案例编写

  1. 设置弹性元素的增长因子

    实例

    <!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>

    运行实例 »

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

    1.png

    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>

运行实例 »

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

2.png

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>

运行实例 »

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


3.png4.png


二、flex属性的用法

image.png

三、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>

运行实例 »

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

6.png



上一条：CSS弹性布局：弹性元素的常用属性-九期线上班下一条：弹性元素（增长因子，缩减因子，基准尺寸）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多