当前位置：网站首页>Flex elastic box item properties

Flex elastic box item properties

2022-07-28 05:51:00 【Still love me】

Last time I talked about the properties of containers , Continue to learn the properties of internal projects today

order Define the sequence of items . The smaller the numerical , The further up the line , The default is 0

 

 

 flex-grow Define the magnification of the project , The default is 0, That is, if there is any remaining space , And don't zoom in .

 

If all of the items flex-grow Attributes are 1, Then they will divide the remaining space equally （ If any ）. If a project flex-grow The attribute is 2, Everything else 1, Then the remaining space occupied by the former will be larger than Double the other items  

flex-shrink It defines the reduction ratio of the project , The default is 1, That is, if there is not enough space , The project will shrink  

 

If all of the items flex-shrink Attributes are 1, When space runs out , I'm going to scale it down . If a project flex-shrink The attribute is 0, Everything else 1, When there is not enough space , The former does not shrink Small . Negative values are not valid for this property .

flex-basis Defined before allocating extra space , Spindle space occupied by the project （main size）. The browser is based on this attribute , Calculate if the spindle has extra space . Its default value is auto, The original size of the project . 

  It can be set to follow width or height Property is the same value （ such as 350px）, Then the item will occupy a fixed empty between .

flex flex The attribute is flex-grow, flex-shrink and flex-basis Abbreviation , The default value is 0 1 auto. The last two properties are optional

This property has two shortcut values ：auto (1 1 auto) and none

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				display: flex;
				width: 800px;height: 800px;
				background-color: #00FFFF;
				/* justify-content: center; */
				/* align-items: flex-end; */
				flex-direction: column;
				justify-content: space-between;
			}
			.box .box1{
				width: 200px;height: 200px;
				background-color: #0000FF;
			}
			.box .box2{
				width: 200px;height: 200px;
				background-color: #f0f;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1"></div>
			<div class="box2"></div>
		</div>
	</body>
</html>

  If you are interested, you can try it yourself .

 

 

原网站

版权声明
本文为[Still love me]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/209/202207280517321323.html

边栏推荐

猜你喜欢

随机推荐