flex布局属性shrink basis grow php九期线上培训班 - 作业

Home > List of blog posts > flex布局属性shrink basis grow php九期线上培训班

Blogger Information

Blog 8

fans 0

comment 1

visits 4253

Special Recommendation

More>

Related recommendations

实例

 <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo1</title>
	<style>
		div{
			border:1px dashed red;
			width:550px;
			display: flex;
			background-color: lightgreen;
		}
		div > span{
            padding: 10px;
            background-color: pink;
            border:1px solid black;
            box-sizing: border-box;
		}
		div:nth-child(5) > span:nth-child(3){
			flex-grow:1;
		}
		div:nth-child(7) > span:nth-child(1){
            flex-grow: 1;
		}
		div:nth-child(7) > span:nth-child(2){
            flex-grow: 1;
		}
		div:nth-child(7) > span:nth-child(3){
            flex-grow: 1;
		}
		div:nth-child(9) > span:nth-child(1){
            flex-grow: 0.5;
		}
		div:nth-child(9) > span:nth-child(2){
            flex-grow: 0.3;
		}
		div:nth-child(9) > span:nth-child(3){
            flex-grow: 0.3;
		}
		div:nth-child(11) > span:nth-child(1){
			width: 100px;
            flex-grow: 3;
		}
		div:nth-child(11) > span:nth-child(2){
			width:80px;
            flex-grow: 2;
		}
		div:nth-child(11) > span:nth-child(3){
			width: 120px;
            flex-grow: 1;
		}
	</style>
</head>
<body>
	<h1>flex-grow:设置弹性元素增长因子</h1>
	<h3>(1):所有弹性因子不增长，以原始宽度显示，增长因子为:0(默认)</h3>
	<div>
		<span>item1</span>
		<span>item2</span>
		<span>item3</span>
	</div>
	<h3>(2):将全部剩余空间分配给指定弹性元素，例如:第三个</h3>
	<div>
		<span>item1</span>
		<span>item2</span>
		<span>item3</span>
	</div>
	<h3>(3):全部剩余空间按增长因子在不同弹性元素之间分配</h3>
	<div>
		<span>item1</span>
		<span>item2</span>
		<span>item3</span>
	</div>
	<h3>(4):增长因子支持小数，因为是按比例分配的但是这里测试发现增长因子之和必须超过1 Google浏览器才支持</h3>
	<div>
		<span>item1</span>
		<span>item2</span>
		<span>item3</span>
	</div>
	<h3>(5):每个弹性因素宽度不同时，同样适用以上分配规律</h3>
	<div>
		<span>item1</span>
		<span>item2</span>
		<span>item3</span>
	</div>
</body>
</html>

运行实例 »

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

demo2:flex-shrink

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo2</title>
	<style>
		div{
			width: 300px;
			background-color: lightgreen;
			border:3px dashed red;
			display: flex;
		}
		div:nth-child(3) > span{
			width: 120px;
			border:1px solid black;
			padding: 10px;
			background-color: pink;
			flex-shrink: 0;
		}
		div:nth-child(5) > span{
			width: 120px;
			border:1px solid black;
			padding: 10px;
			background-color: pink;
			flex-shrink: 1;
		}
		div:nth-child(7) > span:nth-child(1){
			width: 120px;
			border:1px solid black;
			padding: 10px;
			background-color: pink;
			flex-shrink: 1;
		}
		div:nth-child(7) > span:nth-child(2){
			width: 120px;
			border:1px solid black;
			padding: 10px;
			background-color: pink;
			flex-shrink: 2;
		}
		div:nth-child(7) > span:nth-child(3){
			width: 120px;
			border:1px solid black;
			padding: 10px;
			background-color: pink;
			flex-shrink: 2;
		}
		div:nth-child(9) > span{
			width: 120px;
			border:1px solid black;
			padding: 10px;
			background-color: pink;
			flex-shrink: 0.5;
		}
		div:nth-child(11) > span:nth-child(1){
			width: 100px;
			border:1px solid black;
			padding: 10px;
			background-color: pink;

			flex-shrink: 0.5;
		}
		div:nth-child(11) > span:nth-child(2){
			width: 120px;
			border:1px solid black;
			padding: 10px;
			background-color: pink;

			flex-shrink: 0.5;
		}
		div:nth-child(11) > span:nth-child(3){
			width: 140px;
			border:1px solid black;
			padding: 10px;
			background-color: pink;
			flex-shrink: 0.5;
		}
	</style>
</head>
<body>
	<h1>flex-shrink:设置弹性元素缩减因子</h1>
	<h3>(1):所有弹性元素不缩减，以原始宽度显示，缩减因子为:0</h3>
	<div>
		<span>item1</span>
		<span>item2</span>
		<span>item3</span>
	</div>
	<h3>(2):所有弹性元素自适应容器宽度且不换行，缩减因子为:1(默认)</h3>
	<div>
		<span>item1</span>
		<span>item2</span>
		<span>item3</span>
	</div>
	<h3>(3):当三个弹性元素因子不相等时</h3>
	<div>
		<span>item1</span>
		<span>item2</span>
		<span>item3</span>
	</div>
	<h3>(4):缩减因子也可以是小数总和大于1即可</h3>
	<div>
		<span>item1</span>
		<span>item2</span>
		<span>item3</span>
	</div>
	<h3>(5):当每个弹性元素大小不一时缩减公式改变 变为 缩减像素大小=原大小*(缩减因子*调整因子) 调整因子=等缩空间/每个元素大小与缩减因子乘积之和</h3>
	<div>
		<span>item1</span>
		<span>item2</span>
		<span>item3</span>
	</div>
</body>
</html>

运行实例 »

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

demo3:flex-basis

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo3</title>
	<style>
		div{
			width: 400px;
			border: 5px dashed red;
			background-color: lightgreen;
			display: flex;
			box-sizing: border-box;
		}
		div:nth-child(3) > span{
			padding: 10px;
			border:1px solid black;
			background-color: pink;
			flex-shrink:0;
			flex-basis:content;
		}
		div:nth-child(5) > span{
			padding: 10px;
			border:1px solid black;
			background-color: pink;
			flex-shrink:0;
			flex-basis:150px;
		}
		div:nth-child(7) > span{
			width:150px;
			padding: 10px;
			border:1px solid black;
			background-color: pink;
			flex-shrink:0;
			flex-basis:auto;
			box-sizing: border-box;
		}
		div:nth-child(9) > span{
			width:150px;
			padding: 10px;
			border:1px solid black;
			background-color: pink;
			flex-shrink:0;
			flex-basis:100px;
		}
		div:nth-child(11) > span{
			
			padding: 10px;
			box-sizing: border-box;
			border:1px solid black;
			background-color: pink;
			flex-shrink:0;
			box-sizing: border-box;
			flex-basis:20%;
		}
	</style>
</head>

<body>
	<h1>flex-basis:设置弹性元素的基准尺寸</h1>
	<h3>(1):在位设置弹性元素宽度即flex-basis:content(默认)时,弹性元素宽度由内容宽度决定</h3>
	<div>
		<span>item1</span>
		<span>item2</span>
		<span>item3</span>
	</div>
	<h3>(2):存在自定义元素宽度时，则以该宽度显示</h3>
	<div>
		<span>item1</span>
		<span>item2</span>
		<span>item3</span>
	</div>
	<h3>(3):flex-basis:auto自动状态下有浏览器根据预设值自动判定 有用户定义 width:xxx 用用户定义没有的话根据元素内容</h3>
	<div>
		<span>item1</span>
		<span>item2</span>
		<span>item3</span>
	</div>
	<h3>(4):当元素既有自定义(width:xxx)宽度又有基准宽度时(flex-basis:xxx) 以基准宽度为准</h3>
	<div>
		<span>item1</span>
		<span>item2</span>
		<span>item3</span>
	</div>
	<h3>(5):元素基准宽度支持百分比</h3>
	<div>
		<span>item1</span>
		<span>item2</span>
		<span>item3</span>
	</div>
</body>
</html>

运行实例 »

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

demo4:

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo4</title>
	<style>
		div{
			border:3px dashed red;
			background-color: lightgreen;
			display: flex;
		}
		div:nth-child(3) > span{
			width:50px;
			padding:20px;
			border:1px solid black;
			background-color: pink;
			flex: 0 1 auto;
		}
		div:nth-child(5) > span{
			width:50px;
			padding:20px;
			border:1px solid black;
			background-color: pink;
			flex: 1 1 auto;
		}
		div:nth-child(7) > span{
			width:50px;
			padding:20px;
			border:1px solid black;
			background-color: pink;
			flex: 0 0 auto;
		}
		div:nth-child(9) > span{
			width:50px;
			padding:20px;
			border:1px solid black;
			background-color: pink;
			flex: 1;
		}
		div:nth-child(11) > span{
			width:50px;
			padding:20px;
			border:1px solid black;
			background-color: pink;
			flex: 1 1 100px;
		}
		div:nth-child(13) > span{
			width:50px;
			padding:20px;
			border:1px solid black;
			background-color: pink;
			
		}
		div:nth-child(13) > span:nth-child(1){
			width:50px;
			padding:20px;
			border:1px solid black;
			background-color: pink;
			flex: 1 1 100px;
		}
	</style>
</head>
<body>
	<h1>简化弹性元素的基本设置</h1>
	<h3>(1):根据宽度计算，允许缩减适应容器</h3>
	<div>
		<span>item1</span>
		<span>item2</span>
		<span>item3</span>
	</div>
	<h3>(2):根据宽度计算，元素以完全弹性以适应容器</h3>
	<div>
		<span>item1</span>
		<span>item2</span>
		<span>item3</span>
	</div>
	<h3>(3):元素完全失去弹性，以原始大小呈现</h3>
	<div>
		<span>item1</span>
		<span>item2</span>
		<span>item3</span>
	</div>
	<h3>(4):flex只有一个值时表示增长因子 flex 默认值是 flex:0 1 auto;</h3>
	<div>
		<span>item1</span>
		<span>item2</span>
		<span>item3</span>
	</div>
	<h3>(5):第三个有具体数值时以它为基准值计算</h3>
	<div>
		<span>item1</span>
		<span>item2</span>
		<span>item3</span>
	</div>
	<h3>(6):单独设置某一元素弹性大小</h3>
	<div>
		<span>item1</span>
		<span>item2</span>
		<span>item3</span>
	</div>
</body>
</html>

运行实例 »

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

demo5:

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo5</title>
	<style>
		div{
			border:1px dashed red;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			background-color: lightgreen;
			/*align-items: center;*/
			height: 500px;
		}
		span{
			border:1px solid black;
			background-color: pink;
			padding: 20px;
			background-color: white;
		}
		div >span:nth-child(1){
			align-self: center;
			background-color: pink;
		}
		div >span:nth-child(3){
			align-self:flex-start;
			background-color: pink;
		}
	</style>
</head>
<body>
	<div>
		<span>item1</span>
		<span>item2</span>
		<span>item3</span>
	</div>
</body>
</html>

运行实例 »

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

demo6:

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo6</title>
	<style>
		div{
			display: flex;
          /*  background-color: lightgreen;*/
            border:1px solid red;
            flex-direction: column;
		}
		div > span:nth-child(1){
           flex-basis: 10vh;
           background-color: white;
		}
		div > span:nth-child(2){
           flex-basis: 80vh;
           background-color: green;
		}
		div > span:nth-child(3){
           flex-basis: 10vh;
           background-color: white;
		}
	</style>
</head>
<body>
	<div>
		<span>头部</span>
		<span>主体</span>
		<span>底部</span>
	</div>
</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

HTML5 常用标签 -PHP培训九期线上班

2019-10-30 14:27:04