当前位置: 七九推 > IT编程>网页制作>Flex > flex:1详解

flex:1详解

2022年06月23日 Flex 我要评论
flex:1是什么意思 首先介绍一下 flex MDN中是这么定义的 flex-grow flex-grow 用法是这个样子的 flex-grow: 1;flex-grow: inh

flex:1是什么意思

首先介绍一下 flex
MDN中是这么定义的

flex-grow

flex-grow
用法是这个样子的

flex-grow: 1;
flex-grow: inherit;

下面来举个栗子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex:1</title>
    <style>
        .box {
            height: 200px;
            display: flex;
        }
        #box1 {
            background-color: pink;
            flex-grow: 1;
        }
        #box2 {
            background-color: yellow;
            flex-grow: 3;
        }
    </style>
</head>
<body>
    <div class="box">
        <div id="box1">box1</div>
        <div id="box2">box2</div>
    </div>
</body>
</html>

一个大盒子,box,里面两个小盒子,box1、box2,大盒子有个高200px,再设置display: flex;小盒子设置不同的flex-grow,代表一份和三份。
效果如图
在这里插入图片描述

flex-shrink

举个栗子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            display: flex;
        }
        #box1 {
            width: 400px;
            background-color: #c5c5c5;
            flex-shrink: 1;
        }
        #box2 {
            width: 400px;
            background-color: khaki;
            flex-shrink: 3;
        }
    </style>
</head>
<body>
    <div class="box">
        <div id="box1">box1</div>
        <div id="box2">box2</div>
    </div>
</body>
</html>

400px+400px>500px,收缩后盒子宽的比例为3:1
在这里插入图片描述
在这里插入图片描述

flex-basis

举个栗子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            height: 200px;
            display: flex;
        }
        #box1 {
            background-color: lightcoral;
            flex-basis: 80%;
        }
        #box2 {
            background-color: lightpink;
            flex-basis: 100px;
        }
    </style>

</head>
<body>
    <div class="box">
        <div id="box1">box1</div>
        <div id="box2">box2</div>
    </div>
</body>
</html>

主轴宽982px,982px*80%=788.8px
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
最后

flex:1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            height: 200px;
            display: flex;
        }
        #box1 {
            background-color: lightpink;
            flex: 1;
        }
        #box2 {
            background-color: lightsalmon;
            flex: 1;
        }
        #box3 {
            background-color: lightslategray;
            flex: 3;
        }
    </style>
</head>
<body>
    <div class="box">
        <div id="box1">box1</div>
        <div id="box2">box2</div>
        <div id="box3">box3</div>
    </div>
</body>
</html>

在这里插入图片描述
页面自适应,伸缩也方便
在这里插入图片描述

(0)
打赏 微信扫一扫 微信扫一扫

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2022  七九推 保留所有权利. 粤ICP备17035492号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com