当前位置：网站首页>For a detailed explanation of flex:1, flex:1

For a detailed explanation of flex:1, flex:1

2022-06-24 08:14:00 【imkaifan】

flex：1 Is a concatenation of three attributes ：flex-grow、flex-shrink、flex-basis

flex-grow： Property defines the method scale of the project , The default is  0, That is, if there is any remaining space , Not to zoom in 
 If all the projects flex-grow All for 1, Then they will divide the remaining space equally .
 If a project flex-grow The attribute is 2, Everything else 1, Then the former will occupy twice as much space as the other items .

flex-shrink： Attribute defines the reduction ratio of the project , The default is 1, namely ： If there is not enough space , The change project will be reduced .
If all of the items flex-shrink The attribute is 1, When space runs out , Just wait for the scale to shrink .
If a project flex-shrink The attribute is 0, Other projects are 1, When there's not enough space , by 0 It doesn't shrink .

flex-basis： Property defines before allocating extra space , Spindle space occupied by the project .
Browser according to this property , Calculate if the spindle has extra space , Its default value is auto, That is, 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 project will occupy a fixed space .
also basis and width At the same time basis Will be able to width kill 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
    
      width: 500px;
      height: 100px;
      background-color: hotpink;
      display: flex;
    }
 
    .box div {
    
      width: 100px;
    }
 
    .box div:nth-child(1) {
    
      flex-basis: 50px;
    }
 
    .box div:nth-child(2) {
    
      flex-basis: 100px;
    }
 
    .box div:nth-child(3) {
    
      flex-basis: 50px;
    }
  </style>
</head>
<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>

Insert picture description here
flex：flex The attribute is flex-grow, flex-shrink and flex-basis Abbreviation , The default value is 0 1 auto
This property has two shortcut values ：auto (1 1 auto) and none (0 0 auto).

原网站

版权声明
本文为[imkaifan]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/175/202206240410552594.html

边栏推荐

猜你喜欢

随机推荐