flex布局中的width

2018-08-17 本文已影响0人再见噜噜班

举个例子：左边元素定宽，右边元素占满余下部分

<!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>
        *{
            margin:0;
            padding:0;
        }
        .flex{
            display: flex;
            height: 100px;
        }
        .left{
            flex:0 0 100px;
            background: red;
        }
        .right{
            flex:1;
            background: green;
        }
    </style>
</head>
<body>
    <div class="flex">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

关于flex容器内元素的flex属性的解释

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

1.flex-grow

flex-grow定义对额外空间的占有量，默认0，即表示有多余的空间也不要。

<!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>
        *{
            margin:0;
            padding:0;
        }
        .flex{
            display: flex;
            height: 100px;
        }
        .box{
            width:100px;
            background: red;
            margin-right: 10px;
        }
        .flex-box{
            flex:1
        }
    </style>
</head>
<body>
    <div class="flex">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

1.png

当给最后一个box加上flex-box的类，即设置flex:1，则最后一个box会占据剩下空间，如果给每个box设置不同的flex值，则会按比例分配剩下的空间。

<!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>
        *{
            margin:0;
            padding:0;
        }
        .flex{
            display: flex;
            height: 100px;
        }
        .box{
            width:100px;
            background: red;
            margin-right: 10px;
        }
        .flex-1{
            flex:1
        }
        .flex-2{
            flex:2
        }
        .flex-3{
            flex:3
        }
    </style>
</head>
<body>
    <div class="flex">
        <div class="box flex-1"></div>
        <div class="box flex-2"></div>
        <div class="box flex-3"></div>
    </div>
</body>
</html>

2.png

flex-shrink

和flex-grow相反，即当各个元素所占空间之和大于容器时，压缩每个元素的比例，默认是1.如果没有显示定义该属性，将会自动按照默认值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>
        *{
            margin:0;
            left:0;
        }
        .flex{
            width:300px;
            height: 100px;
            display: flex;
            border: 1px solid #111;
            margin:20px;
        }
        .box{
            width: 120px;
            height: 100px;
            background: red;
            margin-right: 10px;
            flex-shrink: 0;
        }
    </style>
</head>
<body>
    <div class="flex">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

1.当设置box的flex-shrink为0时，即不论超出多少，都不压缩子元素的空间，如下图

3.png

2.当每个box设置flex-shrink为1时，即三个box压缩同样的比例，如下图

4.png
3.当给每个box设置flex-shrink依次为1,2,3时，子元素会按照比例来压缩，如图

5.png

flex-basis

表示在分配额外空间之前，成员占据的空间，默认值为auto，意思就是你本来占多少就是多少。但也可以自己设置长度(px)。这个值的效果就是确定在释放和分配空间的时候，你的初值是多少,即flex items 在被放进一个flex容器之前的大小

常用值

flex：auto；等同于 flex：1 1 auto; 意思就是占满额外空间，可缩放。

flex:none; 等同于flex：0 0 auto；意思是不占额外空间，不可缩放。