likes
comments
collection
share

css flex属性深入理解

作者站长头像
站长
· 阅读数 38

一、flex属性

flex是flex-grow、flex-shrink和flex-basis这三个属性的缩写。 首先来看看这三个属性的定义：

  • flex-grow：该元素获得（伸张）多少正可用空间（positive free space）？
  • flex-shrink：该元素要消除（收缩）多少负可用空间（negative free space）？

该属性用于处理浏览器计算弹性元素的 flex-basis 值，并发现它们太大以至于无法适应弹性容器的情形。只要 flex-shrink 有正值，元素就会收缩以至于它们不会溢出容器。

  • flex-basis：在该元素未伸张和收缩之前，它的大小是多少？

通俗的理解，举个例子：A给5个孩子分财产，总共有300万。

  • flex-grow相当于财产分完有剩余，该如何分配。
  • flex-shrink相当于财产分配不足，该如何分配。
  • flex-basis相当于分配得到的固定财产。

二、flex语法

在Flex布局中，一个Flex子项的宽度是由元素自身尺寸，flex-basis设置的基础尺寸，以及外部填充（flex-grow）或收缩（flex-shrink）规则3者共同决定的。

flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
//默认值：flex:0 1 auto

    flex: auto;
    flex: none;
    /* 1个值，flex-grow */
    flex: 1;
    /* 1个值，flex-basis */
    flex: 100px;
    /* 2个值，flex-grow和flex-basis */
    flex: 1 100px;
    /* 2个值，flex-grow和flex-shrink */
    flex: 1 1;
    /* 3个值 */
    flex: 1 1 100px;

当flex定义为一个或者两个值时，如果是长度值（如：100px），则值flex-basis。

三、flex计算尺寸

3.1 计算尺寸优先级

实际上在Flex布局中，一个flex子项的最终尺寸是基础尺寸、弹性增长或收缩、最大最小尺寸限制共同作用的结果。 其中：

  • 基础尺寸由CSS flex-basis属性，width等属性以及box-sizing盒模型共同决定；
  • 弹性增长指的是flex-grow属性，弹性收缩指的是flex-shrink属性；
  • 最大最小尺寸限制指的是min-width/max-width等CSS属性，以及min-content最小内容尺寸。 最终计算的优先级。
<!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>
        .container{
            width: 100%;
            background-color: pink;
            display: flex;
        }
       
        .lt{
            flex:0 0 200px;
            background: blue;
            max-width: 100px;
        }
        .ct{
            flex:1 1 auto;
            background: burlywood;
        }
        .rt{
            flex:0 0 200px;
            background: blueviolet;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="lt box"></div>
        <div class="ct box"></div>
        <div class="rt box"></div>
    </div>
</body>
</html>

css flex属性深入理解

最大最小尺寸限制 > 弹性增长或收缩 > 基础尺寸

3.2 计算尺寸方式

弹性增长（flex-grow）

 .container{
    width: 1000px;
    height: 100px;
    display: flex;
}
   
.lt{
    flex:1 0 200px;
    background: blue;
}
.ct{
    flex:2 0 auto;
    background: burlywood;
}
.rt{
    flex:2 0 200px;
    background: blueviolet;
}

总宽度1000px-基本宽度200px-基本宽度200px = 600px 600/5（flexGrow和） = 120 所以计算得到：

  1. lt：120+200px(flex-basis) = 320px;
  2. ct: 120*2 = 240;
  3. rt:120*2+200px(flex-basis) = 440

css flex属性深入理解

弹性收缩（flex-shrink）

  .container{
    width: 1000px;
    height: 100px;
    display: flex;
    background:pink;
}
        
.lt{
    flex:0 1 200px;
    background: blue;
}
.ct{
    flex:0 2 300px;
    background: burlywood;
}
.rt{
    flex:0 3 800px;
    background: blueviolet;
}

分配收缩尺寸与增长尺寸的不同之处：需要计算出收缩的权重和。

  1. 首先计算权重之和：flex-shrink*flex-basis相加： 1*200+2*300+3*800 = 3200;
  2. 将上例三个盒子基本宽度相加得到1300px，超出父盒子宽度300px。然后，计算每个盒子的收缩空间：flex-shrink*flex-basis/权重之和，
lt:200*1/3200*300 = 18.75，故宽度为200-18.75=181.25
ct:300*2/3200*300 = 56.25，故宽度为200-18.75=243.75
rt:800*3/3200*300 = 225，故宽度为800-225=575

css flex属性深入理解

转载自:https://juejin.cn/post/7265036888431198227
评论
请登录