Flex布局（三：Flex计算规则）

最新推荐文章于 2024-06-21 00:05:48 发布

Justin0223

最新推荐文章于 2024-06-21 00:05:48 发布

阅读量7.1k

点赞数 2

分类专栏： CSS H5

本文链接：https://blog.csdn.net/u010377383/article/details/79661859

版权

CSS 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

15 篇文章 3 订阅

订阅专栏

前言

flex计算规则

（一）基本概念

与弹性盒子计算相关的属性有：

margin：外边距
flex-grow： 定义项目的放大比例，默认为0
flex-shrink： 定义项目的缩小比例，默认为1
flex-basis： 定义了在分配多余空间之前，项目占据的主轴空间（main size）。
flex： 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

（二）当子盒子小于父容器

flex容器每一行的宽度 = 每个子容器的宽度 + 子元素对应轴的margin值

flex-grow（子盒子的伸展值）

flex-grow申明的值为0，不出现伸展的情况

flex-grow申明的值不为0，且子盒子的flex-basis(或width)值之和 < 容器的padding的左边界到右边界的值。那么子盒子会根据申明的flex-grow值去分配剩余的空间。

现在我们举个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .container {
            display: flex;
            width: 400px;
        }

        .container > div {
            height: 40px;
        }

        .first {
            flex: 1 0 0;
            background-color: red;
        }

        .second {
            flex: 2 0 0;
            background-color: blue;
            margin: 0 50px;
        }

        .third {
            flex: 3 0 0;
            background-color: yellow;
        }
    </style>
</head>
<body>
<div class='container'>
    <div class='first'></div>
    <div class='second'></div>
    <div class='third'></div>
</div>
</body>
</html>

上面代码中，我们定义了外层容器width为400px，但是第二个margin为100px。现在flex-basis 属性值为0, 剩下空间为300px。则根据每个盒子flex-grow 属性值及其权重来分配剩余空间

.first宽度 300 *（1/6） = 50px
.second宽度 300 * (2/6) = 100px
.third 宽度 300 *（3/6） = 150

（二）当子盒子超过父容器

flex-basis（子盒子的基准值）

可以代替申明width属性

同时声明width属性和flex-basis属性时，会以flex-basis的值来计算

当flex-basis属性值为0，在width有申明的情况下以width来计，width没有的申明的话，则按其内容来计。

flex-shrink（子盒子的缩小值）

当flex-shirk的值不为0，且子盒子的flex-basis(或width)值之和 > 容器的padding的左边界到右边界的值。那么子盒子会根据申明的flex-shirk值去缩小当前子盒子的空间。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .container {
            display: flex;
            width: 200px;
            height: 400px;
            border: 1px solid #c3c3c3;
        }
  
        .first {
            flex-basis: 40px;
            flex-shrink: 1;
            background-color: red;
        }
        .second {
            flex-shrink: 3;
            background-color: blue;
            width: 200px;
        }
        .third {
            flex-basis: 40px;
            flex-shrink: 2;
            background-color: yellow;
        }
    </style>
</head>
<body>
<div class='container'>
    <div class='first'></div>
    <div class='second'></div>
    <div class='third'></div>
</div>
</body>
</html>

上面代码，父容器定义宽度200px，因为flex-basis可替代width属性的。

所以，子项目宽度为（200+40+40）= 280px，溢出了80px。

首先计算加上权重的值：1*40 + 3 * 200 + 2 * 40 = 720 px

.first 需要缩小的值：(40 * 1/720) * 80 = 4.44px
.second 需要缩小的值：(200 * 3/720) * 80 = 66.67px
.first 需要缩小的值：(40 * 2/720) * 80 = 8.89px

那么我们就可以分别得到盒子宽度

35.56px 133.33px 31.11px

注意

如果flex-basis的属性未设置，即flex-basis: 0,那么弹性盒子计算多余空间或者溢出空间的宽度是依据其width的值，如果width未设置，那么是其内容的宽度
如果同时设置了flex-basis的属性值和width的值，那么将会忽略width的值
flex-basis可设为百分比，是相对于祖先申明为display:flex的元素而言

几种长假的flex取值：

flex：1 ->> flex : 1 1 0%;
flex: none ->> flex: 0 0 auto;
flex: auto ->> flex: 1 1 auto;
flex: 0 auto; 或者 flex: initial -->> flex: 0 1 auto; 即为flex的初始值

Justin0223

关注

2
点赞
踩
18

收藏

觉得还不错? 一键收藏
1
评论
Flex布局（三：Flex计算规则）

与弹性盒子计算相关的属性有：margin：外边距flex-grow：定义项目的放大比例，默认为0flex-shrink：定义项目的缩小比例，默认为1flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。flex：是flex-grow, ...
复制链接

扫一扫

专栏目录