首页 > 编程学习 > flex:1是什么意思

flex:1是什么意思

发布时间:2023/1/25 12:45:15

1.介绍

CSS属性 flex 规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。这是一个简写属性,用来设置 flex-grow, flex-shrink 与 flex-basis。

flex-grow
CSS flex-grow 属性定义弹性盒子项(flex item)的拉伸因子。

flex-grow
用法是这个样子的

flex-grow: 1;
flex-grow: inherit;

2.多说无益,上代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>flex:1</title><style>.box {height: 200px;display: flex;}#box1 {background-color: pink;flex-grow: 1;}#box2 {background-color: yellow;flex-grow: 3;}</style>
</head>
<body><div class="box"><div id="box1">box1</div><div id="box2">box2</div></div>
</body>
</html>

 见下图:

 


本文链接:https://www.ngui.cc/el/2883562.html
Copyright © 2010-2022 ngui.cc 版权所有 |关于我们| 联系方式| 豫B2-20100000