flex:1的三种使用方法

1.两侧固定 中间自适应

设计思路： 设置子元素中有固定宽度的元素，利用flex：1，表示其余子元素可以占用的剩余空间。注意给父元素添加display：flex；

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

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

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

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

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

优点：缩放时，固定宽度的元素不会改变，自适应元素会随着屏幕的缩小而缩小

2.平均分配

设计思路： 设置子元素，用flex表示占多少份数
优点：可实现等比例缩放，适用于手机移动端屏幕大小不同 但是可以随着手机屏幕的改变而改变比例缩放

<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>

3. 多份分配

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

        div span {
            flex: 1;
        }

        div span:nth-child(2) {
            flex: 2;
        }
    </style>
 <div>
        <span>123</span>
        <span>456</span>
        <span>789</span>
    </div>

**好处：**可实现等比例缩放，适用于手机移动端屏幕大小不同 但是可以随着手机屏幕的改变而改变比例缩放