flex:1是什么，适用什么场景

1.flex:1

flex是弹性布局，flex:1是三种属性的缩写；

flex-grow: 0;
//扩展比例
//flex-grow 当父级的宽度大于所有子元素宽度之和时，根据父级的剩余空间，设置子元素
//的扩展比例（设置后，元素给的固定宽度会被覆盖）它是一个系数默认为 0，即如果存在剩
//余空间也不扩展
//剩余空间：剩余空间=父级的宽度-所有子元素的宽度和
//注意：如果没有设置初始宽度，也没有内容，则默认为 0，否则为内容的宽度。例如设置了
//文字，会撑开有初始宽度
flex-shrink: 1;
//收缩比例
//flex-shrink 当所有子元素宽度之和大于父级宽度的时候，根据超出的空间，设置子元素的
//收缩比例（设置后，元素给的固定宽度会被覆盖）它是一个系数默认为 1，如果给个 0 的话，
//就不会收缩
//超出空间：超出空间=所有子元素的宽度和-父级的宽度
flex-basis: auto;、
//元素的大小

可以让你设置的子元素自动适应需要的场景；

2.适用场景

1.两边固定，中间适应的布局；

<style>
        section {
            display: flex;
            width: 1200px;
            height: 50px;
            margin: 0 auto;
        }

        section div:nth-child(1) {
        //固定宽度
            width: 40px;
            height: 50px;
        }

        section div:nth-child(2) {
        // 表示该子项目将占用父元素剩余空间
            flex: 1;
            height: 50px;
        }

        section div:nth-child(3) {
        // 固定宽度
            width: 400px;
            height: 50px;
        }
    </style>

    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>

2.平均分配；

<style>
        div {
            display: flex;
            width: 1200px;
            height: 444px;
            margin: auto;
            background-color: pink;
        }

        div span {
            flex: 1;
        }
    </style>
    <div>
        <span>123</span>
        <span>456</span>
        <span>789</span>
    </div>

总结：felx:1使用的对于弹性布局的设置更加方便快捷，也是关于布局中面试中常问的问题