弹性盒子flex的相关属性

最新推荐文章于 2024-01-06 10:00:00 发布

是千千千熠啊

最新推荐文章于 2024-01-06 10:00:00 发布

阅读量173

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_46092900/article/details/108838990

版权

两个div并排行内显示，实现方式：

设置为行内样式，display：inline-block
设置floa浮动
设置position定位属性为absolute
设置弹性盒子display：flex

弹性盒子flex

flex-grow
flex-basis
flex-shrink
flex-direction
flex-wrap

		<style type="text/css">
			.box{
				width: 500px;
				height: 300px;
				display:flex ;
			}
			.box-1{
				order: 1;/*位置越小越往前*/
				flex-grow: 1;/*平均分布*/
				background-color: black;
				flex-basis: 200px;
			}
			.box-2{
				order: 2;
				flex-grow: 1;
				flex-basis: 200px;
				background-color: bisque;
			}
			.box-3{
				order: 3;
				flex-grow: 1;
				flex-basis: 200px;
				background-color: aquamarine;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box-1"></div>
			<div class="box-2"></div>
			<div class="box-3"></div>
		</div>
	</body>

flex-grow

flex-grow 属性用于设置或检索弹性盒子的扩展比率。

				order: 1;
				flex-grow: 1;
				background-color: black;
			}
			.box-2{
				order: 2;
				flex-grow: 2;/*第二个元素为其他元素得两倍*/
				background-color: bisque;
			}
			.box-3{
				order: 3;
				flex-grow: 1;
				background-color: aquamarine;
			}

flex-basis

设置弹性盒元素的初始长度为 80 像素
*若设置了父级盒子的宽度，只显示子级basis设置的像素长，覆盖掉width的值

<style type="text/css">
			.box{
				width: 200px;/*被basis覆盖*/
				height: 300px;
				display:flex ;
			}
			.box-1{
				order: 1;
				background-color: black;
				flex-basis: 400px;
			}
			.box-2{
				order: 2;
				flex-basis: 200px;
				background-color: bisque;
			}
			.box-3{
				order: 3;
				flex-basis: 200px;
				background-color: aquamarine;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box-1"></div>
			<div class="box-2"></div>
			<div class="box-3"></div>
		</div>
	</body>

flex-shrink

flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。
*如果元素不是弹性盒对象的元素，则 flex-shrink 属性不起作用。

			.box{
				width: 500px;
				height: 300px;
				display:flex ;
			}
			.box-1{
				order: 1;
				flex-grow: 1;
				flex-shrink: 0;
				background-color: black;
				flex-basis: 200px;
			}
			.box-2{
				order: 2;
				flex-grow: 1;
				flex-shrink: 0;
				flex-basis: 200px;
				background-color:bisque;
			}
			.box-3{
				order: 3;
				flex-grow: 1;
				flex-shrink: 1;
				flex-basis: 200px;
				background-color: aquamarine;
			}

父元素box的宽度为500px，子元素被定义为200px，那么2003=600px，超出父元素100px，那么超出的100px就需要被box1-2-3笑话，所以1001+1001+1001=300px，那么1-2-3就被溢出（100*1/300）*100=33px，所以1-2-3的宽应该为100-33=67px

*flex是flex-grow，flex-shrink, flex-basis 的缩写形式，缩写规则：

如：flex 取值为 none，则计算值为 0 0 auto

.box{flex: none;}
.box{
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
}

当 flex取值为 auto，则计算值为 1 1 auto

.box {flex: auto;}
.box {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}

flex-direction

row：默认顺序
row-reverse：与row相反
column：将垂直显示，如列一样
column-reverse：与column相反

div
{
display:flex;
flex-direction:row-reverse;/*与row顺序相反==倒叙*/
}

flex-wrap

让弹性盒元素在必要的时候拆行（当父级width不够一行显示子级元素时，就会下一行显示）

nowrap：默认值，不灵活拆行
wrap：规定在必要的时候拆行或不拆行
wrap-reverse：规定在必要的时候拆行或不拆行，但是以相反的顺序

	.box{
				width: 500px;
				height: 300px;
				display:flex ;
				flex-wrap: wrap-reverse;
			}

是千千千熠啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
弹性盒子flex的相关属性

两个div并排行内显示，实现方式：设置为行内样式，display：inline-block设置floa浮动设置position定位属性为absolute设置弹性盒子display：flex弹性盒子flexflex-growflex-basisflex-shrinkflex-directionflex-wrap <style type="text/css"> .box{ width: 500px; height: 300px; display:fle
复制链接

扫一扫