search

博客列表 >第7章 弹性布局之弹性元素 - PHP培训九期线上班11.5

第7章 弹性布局之弹性元素 - PHP培训九期线上班11.5

会上树的猪
会上树的猪原创
2019年11月07日 18:00:11610浏览

实例

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>无标题</title>
	<style type="text/css">
        *{
            padding: 0;
            margin: 0;
            box-sizing:border-box;
        }
		.box{
			border: 2px dashed #ddd;
			margin: 15px;
			background: #abcdef;
			width: 550px;
		}
		.item{
			border: 1px solid;
			padding: 20px;
			background: red;
			width: 100px;
		}
		.item1{
			border: 1px solid;
			padding: 20px;
			background: red;
			width: 250px;
		}
		.item2{
			border: 1px solid;
			padding: 20px;
			background: red;
		}
		/*块级-弹性容器*/
		.flex{
			display: flex;
		}
		.demo2>.item:first-of-type,.demo2>.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: 150;
			flex-grow:2;
		}
		.demo5>.item:last-of-type{
			width: 180px;
			flex-grow:6;
		}
		.demo6>.item1{
			flex-shrink:0;
		}
		.demo7>.item1{
			flex-shrink:1;
		}

		.demo8>.item1:first-of-type{
			flex-shrink:1;
		}
		.demo8>.item1:nth-of-type(2){
			flex-shrink:2;
		}
		.demo8>.item1:last-of-type{
			flex-shrink:3;
		}

		.demo9>.item1:first-of-type{
			flex-shrink:0.2;
		}
		.demo9>.item1:nth-of-type(2){
			flex-shrink:0.3;
		}
		.demo9>.item1:last-of-type{
			flex-shrink:0.5;
		}

		.demo10>.item1:first-of-type{
			width: 220px;
			flex-shrink:2;
		}
		.demo10>.item1:nth-of-type(2){
			width: 250px;
			flex-shrink:2;
		}
		.demo10>.item1:last-of-type{
			width: 280px;
			flex-shrink:6;
		}

		.demo11>.item2{
			flex-basis:content;
		}
		.demo13>.item2{
			flex-basis:auto;
		}
		.demo14>.item{
			flex-basis:150px;
		}

		.demo15>.item:first-of-type{
			flex-basis:20%;
		}
		.demo15>.item:nth-of-type(2){
			flex-basis:30%;
		}
		.demo15>.item:last-of-type{
			flex-basis:50%;
		}
	</style>
</head>
<body>
<h1>设置弹性元素的增长因子</h1>
<h2>1.所有弹性元素不增长,以原始宽度显示 增长因子为0</h2>
<div class="box flex row demo1">
	<span class="item">1</span>
	<span class="item">2</span>
	<span class="item">3</span>
</div>
<br/>

<h2>2.将全部剩余空间分配给最后一个元素</h2>
<div class="box flex row demo2">
	<span class="item">1</span>
	<span class="item">2</span>
	<span class="item">3</span>
</div>
<br/>

<h2>3.将剩余空间按增长因子在不同元素间分配</h2>
<div class="box flex row demo3">
	<span class="item">1</span>
	<span class="item">2</span>
	<span class="item">3</span>
</div>
<br/>

<h2>4.将剩余空间按增长因子在不同元素间分配</h2>
<div class="box flex row demo4">
	<span class="item">1</span>
	<span class="item">2</span>
	<span class="item">3</span>
</div>
<br/>
<h2>5.将剩余空间按增长因子在不同元素间分配</h2>
<div class="box flex row demo5">
	<span class="item">1</span>
	<span class="item">2</span>
	<span class="item">3</span>
</div>
<br/>

<h1>设置弹性元素的缩减因子</h1>
<h2>1.flex-shrink 所有弹性元素不缩减 保持初始状态</h2>
<div class="box flex row demo6">
	<span class="item1">1</span>
	<span class="item1">2</span>
	<span class="item1">3</span>
</div>
<br/>

<h2>2.flex-shrink.增长因子为1</h2>
<div class="box flex row demo7">
	<span class="item1">1</span>
	<span class="item1">2</span>
	<span class="item1">3</span>
</div>
<br/>

<h2>3.三个弹性元素的缩减因子不相等</h2>
<div class="box flex row demo8">
	<span class="item1">1</span>
	<span class="item1">2</span>
	<span class="item1">3</span>
</div>
<br/>

<h2>4.缩减因子为小数</h2>
<div class="box flex row demo9">
	<span class="item1">1</span>
	<span class="item1">2</span>
	<span class="item1">3</span>
</div>
<br/>

<h2>5.每个元素不相等</h2>
<div class="box flex row demo10">
	<span class="item1">1</span>
	<span class="item1">2</span>
	<span class="item1">3</span>
</div>
<br/>

<h1>设置弹性因子的基准尺寸</h1>
<h2>1.flex-basis:content 在未设置弹性元素宽度时 以内容宽度显示</h2>
<div class="box flex row demo11">
	<span class="item2">1</span>
	<span class="item2">2</span>
	<span class="item2">3</span>
</div>
<br/>

<h2>2.存在自定义元素宽度时 则以该宽度显示</h2>
<div class="box flex row demo12">
	<span class="item">1</span>
	<span class="item">2</span>
	<span class="item">3</span>
</div>
<br/>

<h2>3.自动状态下，由浏览器根据预设值自行判断</h2>
<div class="box flex row demo13">
	<span class="item2">1</span>
	<span class="item2">2</span>
	<span class="item2">3</span>
</div>
<br/>

<h2>4.既有自定义宽度 又有基准宽度以谁为准</h2>
<div class="box flex row demo14">
	<span class="item">1</span>
	<span class="item">2</span>
	<span class="item">3</span>
</div>
<br/>

<h2>5.元素基准宽度支持百分比设置</h2>
<div class="box flex row demo15">
	<span class="item">1</span>
	<span class="item">2</span>
	<span class="item">3</span>
</div>
<br/>

</body>
</html>

运行实例 »

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

无标题.png

实例

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>无标题</title>
	<style type="text/css">
        *{
            padding: 0;
            margin: 0;
            box-sizing:border-box;
        }
		.box{
			border: 2px dashed #ddd;
			margin: 15px;
			background: #abcdef;
			width: 500px;
		}
		.item{
			border: 1px solid;
			padding: 20px;
			background: red;
		}
		.flex{
			display: flex;
		}
		.demo1>.item{
			width: 100px;
			height: 60px;
			flex:inirlat;
		}
		.demo2>.item{
			width: 100px;
			height: 60px;
			flex:auto;
		}
		.demo3>.item{
			width: 100px;
			height: 60px;
			flex:none;
		}

		.demo4>.item{
			width: 100px;
			height: 60px;
			flex:1;
		}
		.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%;
		}
	</style>
</head>
<body>
<h1>flex简化弹性元素的基本设置</h1>
<h2>1.根据宽度设置 容许缩减适应容器</h2>
<div class="box flex row demo1">
	<span class="item">1</span>
	<span class="item">2</span>
	<span class="item">3</span>
</div>
<br/>

<h2>2.根据宽度设置 元素完全弹性以适应容器</h2>
<div class="box flex row demo2">
	<span class="item">1</span>
	<span class="item">2</span>
	<span class="item">3</span>
</div>
<br/>

<h2>3.元素完全失去弹性</h2>
<div class="box flex row demo3">
	<span class="item">1</span>
	<span class="item">2</span>
	<span class="item">3</span>
</div>
<br/>

<h2>4.一个数值表示增长因子</h2>
<div class="box flex row demo4">
	<span class="item">1</span>
	<span class="item">2</span>
	<span class="item">3</span>
</div>
<br/>

<h2>5.一个数值表示增长因子</h2>
<div class="box flex row demo5">
	<span class="item">1</span>
	<span class="item">2</span>
	<span class="item">3</span>
</div>
<br/>

<h2>5.一个数值表示增长因子</h2>
<div class="box flex row demo6">
	<span class="item">1</span>
	<span class="item">2</span>
	<span class="item">3</span>
</div>
<br/>

</body>
</html>

运行实例 »

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

无标题1.png

实例

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>flex-圣杯布局</title>
	<style type="text/css">
	*{
		padding: 0;
		margin: 0;
	}
		header{
			width: 100%;
			height: 60px;
			background: #abcdef;
			text-align: center;
			line-height: 60px;
		}
		.box{
			width: 100%;
			height: 280px;
			background: red;
			display: flex;
			line-height: 280px;
		}
		.left{
			background: yellow;
			width: 200px;
			text-align: center;
		}
		.center{
			flex:1;
			text-align: center;
		}
		.right{
			background: yellow;
			width: 200px;
			text-align: center;
		}
		footer{
			width: 100%;
			height: 60px;
			background: #abcdef;
			text-align: center;
			line-height: 60px;
		}
	</style>
</head>
<body>
<header>top</header>
<div class="box">
	<div class="left">left</div>
	<div class="center">center</div>
	<div class="right">right</div>
</div>
<footer>bottom</footer>
</body>
</html>

运行实例 »

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

flex-圣杯布局.png


上一条：第8章 Flex布局小案例 - PHP培训九期线上班11.6下一条：CSS弹性布局案例1 - 九期线上班
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多