有关flex布局的具体使用和图解、代码解析

于 2020-01-08 21:43:32 发布
阅读量254 收藏
点赞数
文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46113485/article/details/103889510
版权

1--------------.flex布局

1.1.认识flex布局：IE10及以上,flex布局是目前web开发中使用最多的布局方案：
1.1.1 flex布局（Flexible布局，弹性布局）
目前特别在移动端用的最多，pc端也使用越来越多
1.1.2 两个重要的概念：
开启了flex布局的元素是 flex container —最外层的包裹
flex container 里面的直接子元素叫做 flex items ----里面包裹的元素
1.1.3 设置display 属性为flex 或者inline-flex 可以成为 flex container
1.flex:flex container 以block-level 形式存在---------例子如下：
在这里插入图片描述
在这里插入图片描述
2.inlink-flex:flex container 以inline-level 形式存在-----例子如下：
在这里插入图片描述
在这里插入图片描述
2.flex相关的属性
<1>应用在flex container上的CSS属性：
flex-flow、flex-direction、flex-wrap、justify-content、align-items、align-content
<2>应用在flex items上的CSS属性
flex、flex-grow、flex-grow、flex-shrink、order、align-self

2.1.1 flex-direction
flex items 默认都是沿着main axis(主轴)从mian start 开始往main end 方向排布。
flex-direction决定了main axis 的方向，有4个取值：例子如下：
row(默认值) 、row-reverse、column、column-reverse
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.1.2 justify-content 决定了flex items在main axis 上的对齐方式
flex-start(默认值):与main start对齐
flx-end：与main end对齐
在这里插入图片描述
center：居中对齐
在这里插入图片描述
space-between：
flex items之间的距离相等
与main start、main end两端对齐
在这里插入图片描述
space-evenly：
flex items之间的距离相等
flex items与main start、main end之间的距离 等于flex items之间的距离
在这里插入图片描述
space-around：
flex items之间的距离相等
flex items与main start、main end之间的距离是flex items之间的距离的一半
在这里插入图片描述

2.1.3 flex-wrap 决定了flex container是单行还是多行
nowrap(默认)：单行----默认情况下,所有的flex items 都会在同一行显示 在这里插入图片描述
wrap:多行显示-----换行
在这里插入图片描述
wrap-reverse:多行（反转）
在这里插入图片描述
/flex-flow: 缩写属性 flex-direction || flex-wrap;/
flex-flow: row-reverse wrap;
justify-content: space-evenly; /*间隔评分 */
在这里插入图片描述
2.1.4---------align-content
flex-flow: row wrap;
justify-content: space-evenly; /*间隔评分 */
在这里插入图片描述
align-content决定了多行flex items在cross axis上的对齐方式，用法与justify-content类似
stretch(默认值):与align-items的stretch类似
flex-start:与cross start对齐
flex-end:与cross end对齐
在这里插入图片描述
center：居中对齐
在这里插入图片描述
space-between:
flex items之间的距离相等
与cross start、cross end两端对齐在这里插入图片描述
space-around:
flex items之间的距离相等
flex items与cross start\cross end之间的距离是flex items之间距离的一半
在这里插入图片描述
space-evenly：
flex items之间的距离相等
flex items与cross start、cross end之间的距离等于flex items之间的距离在这里插入图片描述
flex-direction上述的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		.box{
			/*开启flex布局*/
			/*inlink-flex:行内元素-----一行里面 宽高无效* /
			/*flex :块级元素  ----独占一行 宽高无效*/
			/*display: inline-flex;*/
			width: 520px;
			height: 400px;
			margin: 0 auto;
			background-color: salmon;
			display: flex;   /*//外层开启flex布局之后,不再区分块级元素,还是行内元素*/
			
		    /*flex-direction: 绝对主轴的方向;*/
		   /*row 默认就是从左到右的方向*/
		   /*row-direction 主轴从右到左*/
		   /*flex-direction: row-reverse;*/ 
		  /*column 主轴从上到下*/
		 /*column 主轴从下到上*/
		  /*flex-direction: column-reverse;*/
		
		 
		 /*3.justify-content: 决定flex items主轴的对齐方式;*/
		/*justify-content: flex-end;*/
		/*justify-content: center;*/
		/*justify-content: space-between;*/
		/*justify-content: space-evenly;*/
		/*justify-content: space-around;*/
		
		/*4.结论:默认情况下,所有的flex items 都会在同一行显示*/
		/*nowrap:不换行*/
		/*wrap  换行显示*/
		/*flex-wrap: wrap;*/
		
		/*flex-flow: wrap-reverse;*/
		
		/*flex-flow: 缩写属性  flex-direction || flex-wrap;*/
		flex-flow: row wrap;
		justify-content: space-evenly;   /*间隔评分 */
		  
		/*align-content: flex-end;*/
		/*align-content: center;*/
		/*align-content: space-between;*/
		/*align-content: space-around;*/
		align-content: space-around;
		}
	
		.item{
			width: 100px;
			height: 100px;
			color: white;
			text-align: center;
		}
		.item1{
			background-color: darkcyan;
		}
		.item2{
			background-color: darkkhaki;
		}
		.item3{
			background-color: skyblue;
		}
	</style>
	<body>
		<div class="box">
			<div class="item item1">item1</div>
			<div class="item item2"> item2</div>
			<div class="item item3">item3</div>
			<div class="item item1">item4</div>
			<div class="item item2"> item5</div>
			<div class="item item3">item6</div>
			<div class="item item1">item7</div>
			<div class="item item2"> item8</div>
			<div class="item item3">item9</div>
		</div>
		
		<strong>行内元素</strong>
	</body>
</html>

2.2.flex-item
2.2.1—order决定了flex items的排布顺序
可以设置任意整数（正整数、负整数、0），值越小就越排在前面
默认值是0
在这里插入图片描述
2.2.2----flex items 可以通过align-self 覆盖flex container设置的align-items
auto(默认值)：遵从flex container的align-items设置
stretch、flex-start、flex-end、center、baseline、效果跟align-items一致
在这里插入图片描述
2.2.3—flex-grow决定了flex items如何扩展
可以设置任意非负数字（正小数、正整数、0），默认是0
当flex container在main axis方向上有剩余size时，flex-grow属性才会有效
如果所有flex items的flex-grow总和sum超过1，每个flex item扩展的size为：flex container的剩余 size * flex-grow/sum
如果所有flex items的flex-grow综合不超过1，每个flex item扩展的size为：flex container的剩余size * flex-grow
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
2.2.4—flex-shrink决定了flex items如何收缩
可以设置任意非负数字（正小数，正整数），默认是1
当flex items在main axis方向上超过了flex container的size，flex-shrink属性才会生效
如果所有flex items的flex-shrink总和超过1，每个flex item收缩的size为：flex items超出flex container的size*收缩比例/所有flex items的收缩比例之和
如果所有flex items的flex-shrink总和sum不超出1，每个flex item收缩的size为：
flex items超出flex container的size * sum * 收缩比例/所有flex items的收缩比例之和
收缩比例 = flex-shrink * flex item的base size
base size就是flex item放入flex container之前的size
在这里插入图片描述
2.2.5–flex-basis用来设置flex items在main axis方向上的base size
auto（默认值）、具体的宽度数值（100px）
决定flex items最终base size的因素，从优先级高到底
max-width\max-height\min-width\min-heght
flex-basis
width\height
内容本身的size
在这里插入图片描述
2.2.6—flex是flex-grow || flex-shrink || flex-basis的简写，flex属性可以指定1个，2个或3个值
单值语法：值必须为以下其中之一：
一个无单位数():它会被当做的值
一个有效的宽度(width)值；它会被当作的值
关键字none,auto或initial
双值语法：第一个值必须为一个无单位数，并且它会被当作的值
第二个值必须为以下之一：
一个无单位数：它会被当作 的值
一个有效的宽度值：它会被当作的值
三值语法：
第一个值必须为一个无单位数，并且它会被当作 的值
第二个值必须为一个无单位数，并且它会被当作,的值
第三个值必须为一个有效的宽度值，并且它会被当作的值
在这里插入图片描述
在这里插入图片描述
上述操作的所有代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		.box{
			/*开启flex布局*/
			/*inlink-flex:行内元素-----一行里面 宽高无效* /
			/*flex :块级元素  ----独占一行 宽高无效*/
			/*display: inline-flex;*/
			width: 520px;
			height: 400px;
			margin: 0 auto;
			background-color: salmon;
			display: flex;   /*//外层开启flex布局之后,不再区分块级元素,还是行内元素*/
			
		    /*flex-direction: 绝对主轴的方向;*/
		   /*row 默认就是从左到右的方向*/
		   /*row-direction 主轴从右到左*/
		   /*flex-direction: row-reverse;*/ 
		  /*column 主轴从上到下*/
		 /*column 主轴从下到上*/
		  /*flex-direction: column-reverse;*/
		
		 
		 /*3.justify-content: 决定flex items主轴的对齐方式;*/
		/*justify-content: flex-end;*/
		/*justify-content: center;*/
		/*justify-content: space-between;*/
		/*justify-content: space-evenly;*/
		/*justify-content: space-around;*/
		
		/*4.结论:默认情况下,所有的flex items 都会在同一行显示*/
		/*nowrap:不换行*/
		/*wrap  换行显示*/
		/*flex-wrap: wrap;*/
		
		/*flex-flow: wrap-reverse;*/
		
		/*flex-flow: 缩写属性  flex-direction || flex-wrap;*/
		/*flex-flow: row wrap;
		justify-content: space-evenly;   /*间隔评分 */*/
		  
		/*align-content: flex-end;*/
		/*align-content: center;*/
		/*align-content: space-between;*/
		/*align-content: space-around;*/
		/*align-content: space-around;*/
		
		/*margin: 0 auto;*/
		align-items: center;  /*垂直中心对齐*/
		}
	
		.item{
			width: 100px;
			height: 100px;
			color: white;
			text-align: center;
			flex: 1 0.2 200px; 
			/*flex: 1; /*意味着是 flex-grow*/*/
		}
		.item1{
			background-color: darkcyan;
			/*order: 10;*/
			/*flex-grow: 0.2;*/
			/*flex-shrink: 0.2;*/
			/*flex-basis: 200px;*/
		}
		.item2{
			background-color: darkkhaki;
			/*height: 130px;*/
			/*order: 2;*/
			/*flex-grow: 0.2;*/
			/*flex-shrink: 0.2;*/
		}
		.item3{
			background-color: skyblue;
			/*order: 100;*/
			/*align-self: flex-end;*/
			/*flex-grow: 0.1;*/
			/*flex-shrink: 0.2;*/
		}
	</style>
	<body>
		<div class="box">
			<div class="item item1">item1</div>
			<div class="item item2"> item2</div>
			<div class="item item3">item3</div>	
		</div>
		
		<strong>行内元素</strong>
	</body>
</html>
少年的舟
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值