子元素属性设置-Web响应式布局入门到实战

当前位置:　首页>> 技术小册>> Web响应式布局入门到实战

子元素可设置属性：

flex-basis:设置了基准值后，原子元素的宽度将不再生效：

```
<style>
        .div0{
            display: flex;
            width: 400px;
            height: 500px;
            background-color: violet;
        }
        .div0 div{
            width:200px;
            height:200px;
            background-color: yellow;
            flex-basis: 50px; /* 基准值设置为50，则上面的width将失效 */
            flex-basis: 30%; /* 设置为百分比，则宽度为父对象的百分比，400*30% = 120px */
        }
    </style>
</head>
<body>
    <div class="div0">
        <div>div1</div>
        <div>div2</div>
    </div>
    
</body>
```

也可以单独对子元素设置基准值：

```
.div0 div:nth-child(1){
    flex-basis: 50px;
}
.div0 div:nth-child(2){
    flex-basis: 100px;
}
```

- flex-grow:1 表示该子元素占父元素剩余宽度的份数，将所有子元素设置的份数相加，得出总份数，用父元素剩余宽度除以总份数，计算出每份的宽度。新的子元素的宽度为原来的宽度+每份的宽度*份数。
- flex-grow属性描述当父元素有剩余空间时，子元素如何扩展自己的宽度，通过设置份数，来决定子元素扩展的比率。

flex-grow计算方式示例：

```
    <style>
        .div0 {
            display: flex;
            width: 400px;
            height: 500px;
            background-color: violet;
        }

.div0 div {
            width: 200px;
            height: 200px;
            background-color: yellow;
            flex-basis: 50px;
        }

/**
         * flex-grow值计算规则：
         * 父元素的宽度为400
         * 子元素1的宽度为50
         * 子元素2的宽度为100
         * 剩余宽度为 400-50-100 = 250
         * 给两个子元素分别添加flex-grow:1
         * 即，每个子元素占一份，一共占2份
         * 250 / 2 = 125，即每份的宽度为125
         * 现在两个子元素的宽度为：
         * 子元素1: 50+125
         * 子元素2：100+125
        */

.div0 div:nth-child(1) {
            flex-basis: 50px;
            flex-grow:1;
        }

.div0 div:nth-child(2) {
            flex-basis: 100px;
            flex-grow:1;
        }
    </style>
</head>

</body>
```

效果：

![](/uploads/images/20230421/e2a7a6b704d0b92d794918e2b487f84c.png)

**flex-shrink**
原理与flex-grow基本相同，区别为父元素的宽度不够显示所有子元素的宽度，此时通过设置该属性，可以将子元素缩小。
默认情况下，当子元素超出父元素宽度，会自动缩小，如果设置子元素不缩小，可以设置：

```
flex-shrink:0
```

计算方式为子元素的宽度总和-父元素的宽度，得出超出的宽度。
用超出的宽度 / 子元素设置的份数总和，得出每份的宽度。
子元素现在的宽度为：原来的宽度-每份的宽度*子元素设置的份数。

**flex**
flex的顺序不能错：flex-grow,flex-shrink,flex-basis

示例：

```
flex: 1 1 300px;
flex: 4 3 300px;
```

该分类下的相关小册推荐：

WebGL开发指南

uniapp快速入门与实战

vue高级应用开发与构建

web前端面试完全指南