flex:1详解

flex布局中的flex---->flex-grow、flex-shrink、flex-basic的缩写
flex:none ----->flex:0 0 auto
flex:auto ----->flex:1 1 auto

假设以上三个属性同样取默认值，则flex的默认值为0 1 auto。

1.flex取三个值时，

.item {flex: 2333 3222 234px;}
.item {
    flex-grow: 2333;
    flex-shrink: 3222;
    flex-basis: 234px;
}

2.flex取值为非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%

.item {flex: 1;}
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

3.flex取值为长度或者百分比时，则视为 flex-basis 值，flex-grow 取 1，flex-shrink 取 1，

.item-1 {flex: 0%;}
.item-1 {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

4.flex取值为两个非负数字，则分别视为 flex-grow 和 flex-shrink 的值，flex-basis 取 0%

.item {flex: 2 3;}
.item {
    flex-grow: 2;
    flex-shrink: 3;
    flex-basis: 0%;
}

5.当 flex 取值为一个非负数字和一个长度或百分比，则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1

.item {flex: 2333 3222px;}
.item {
    flex-grow: 2333;
    flex-shrink: 1;
    flex-basis: 3222px;
}

flex-basic的取值范围取决于：Box-sizing

auto：首先检索该子元素的主尺寸，如果主尺寸不为 auto，则使用值采取主尺寸之值；如果也是 auto，则使用值为 content。
content：指根据该子元素的内容自动布局。有的用户代理没有实现取 content 值，等效的替代方案是 flex-basis 和主尺寸都取 auto。
百分比：根据其包含块（即伸缩父容器）的主尺寸计算。如果包含块的主尺寸未定义（即父容器的主尺寸取决于子元素），则计算结果和设为 auto 一样。

<!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 type="text/css">
        .parent {
            width:600px;
            display: flex;
        }

        .parent>div {
            height: 100px;
        }

        .item-1 {
            width: 100px;
            flex: 2 1 40%;
            background: blue;
        }

        .item-2 {
            width: 100px;
            flex: 2 1 auto;
            background: red;
        }
        .item-3 {
            flex: 1 1 200px;
            background: lightblue;
        }
    </style>
</head>

<body>
    <!-- 子元素的总基准：600*40%+100+200=540 -->
    <!-- 剩余空间：600-540=60 -->
    <!-- item1的宽度：60*2/5+600*40%=264 -->
    <!-- item2的宽度：60*2/5+100=124 -->
    <!-- item3的宽度：60*1/5+200=212 -->
    <div class="parent">
        <div class="item-1"></div>
        <div class="item-2"></div>
        <div class="item-3"></div>
    </div>
</body>

</html>

相关推荐