flex的三个属性

最新推荐文章于 2023-05-18 14:47:15 发布

土匪丁的窝子

最新推荐文章于 2023-05-18 14:47:15 发布

阅读量5.1k

点赞数 7

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/zjw0021/article/details/114199464

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

flex:flex-grow flex-shrink flex-basis

flex-grow:定义放大比例，默认为0，规定项目相对于其他灵活的项目进行扩展的量
flex-shrink: 定义了项目的缩小比例，仅在宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值，默认为1
flex-basis:给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小

说起来听拗口也不怎么好理解，直接上代码吧！

示例1：

子元素都设置为flex:1的时候平均分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            padding: 0;
            margin: 0;
        }

        .parent {
            width: 1000px;
            display: flex;
            border: 1px solid #000;
            margin: 50px;
        }

        .parent div {
            height: 200px;
            flex: 1;
        }

        .child-1 {
            background-color: #888;
        }

        .child-2 {
            background-color: #f55;
        }

        .child-3 {
            background-color: #55f;
        }
    </style>
</head>

<body>

    <div class="parent">
        <div class="child-1"></div>
        <div class="child-2"></div>
        <div class="child-3"></div>
    </div>

</body>

</html>

flex:1 === flex-grow: 1; flex-shrink: 1; flex-basis: 0%;

实现固定1:3:2比例排列：

将子元素的flex分别设置为1,3,2，即可实现1:3:2的布局排列

.child-1 {
    flex: 1;
    background-color: #888;
}

.child-2 {
    flex: 3;
    background-color: #f55;
}

.child-3 {
    flex: 2;
    background-color: #55f;
}

示例2：

flex-basis:

.child-1 {
    flex-grow: 1;
    flex-basis: 400px;
    background-color: #888;
}

将第一个子元素flex-basis设置为400px，则容器剩余分配部分为1000px-400px=600px,

child-1: 400+600*(1/(1+3+2))=500px

child-2: 600*(3/(1+3+2))=300px

child-3: 600*(2/(1+3+2))=200px

示例3：

flex-shrink：

.parent div {
    height: 200px;
    flex-grow: 1;
    flex-basis: 400px;
}

.child-1 {
    flex-shrink: 1;
    background-color: #888;
}

.child-2 {
    flex-shrink: 2;
    background-color: #f55;
}

.child-3 {
    flex-shrink: 7;
    background-color: #55f;
}