实习生漂流记之移动端flex布局

问题简述

最近公司给我新派进一个项目，以为可以大展身手，没想到死的很惨，直接给了五个ui设计好的页面让我做，心里各种想法，但还是按照做了，ui设计图是移动端的开发，开始没注意，学习移动端开发也是一年多前的事情了，开始也没考虑太多，直接上手操作，大致样式图如下所示：

使用大众思维，先进性布局分块top、main即可，然后就是想用flex布局来完成页面的设计。

错误集合

设计出来的页面无法在不同尺寸适配下正常显示，简直是八仙过海，各显神通，而且还把设计图中顶部的手机自带按钮图标给设计出来了，实在憋不出来了，就去求救大佬，结果无地自容，虽然我是个实习生，但是这基本的CSS都拿捏不来吗？居然还劝我要不去报个培训机构，哈哈，有意思，我更喜欢带薪学习，岂不是美哉。

上才艺

直接暴露出原因以及给出解决办法，首先做移动端开发，要在html中配置关于屏幕适配的meta，如下：

 <meta name="viewport" content="width=device-width, initial-scale=1" />

接着就是CSS的问题了，关键就是自适应，解决移动开发自适应的方法有很多，我就是喜欢用flex，虽然不会用，但我就是喜欢它，关于flex的知识已经满大街都是了，我也不copy了，需要的时候直接看别的也挺方便，说一下我的低级错误，就是给div设置了宽度（width），导致直接写死，还有自适应什么事呢，重要事情说三遍，如果不想使用rem、百分比、媒体查询等，只想使用flex自适应的话，
不要把宽度写死！
不要把宽度写死！
不要把宽度写死！
废话到此结束，上代码，便于回头复习：

/*
 * @Autor: lingchen.liu
 * @Date: 2022-02-28 16:11:43
 * @LastEditors: lingchen.liu
 * @LastEditTime: 2022-02-28 17:26:41
 * 文件类型： jsx
 */
import React from "react";

import './cockpit1.scss';

export default function Cockpit1() {
    return (
        <div className="container">
            <div className="top_selete">
                    <div className="left">
                        <span>BU</span>
                        <span>
                            <select name="" id="">
                                <option value="">boss</option>
                            </select>
                        </span>
                    </div>
                    <div className="right">
                        <span>团队</span>
                        <span>
                            <select name="" id="">
                                <option value="">team</option>
                            </select>
                        </span>
                    </div>
            </div>
            {/* 达成率 */}
            <div className="yield_rate">
                YieldRate
            </div>
            {/* 销售分布 */}
            <div className="sales_distribution">
                SalesDistribution
            </div>
            {/* 销售明星 */}
            <div className="sales_star">
                SalesSta
            </div>
            {/* 方位分布 */}
            <div className="post_cover">
                PostCover
            </div>
            {/* 奖金分布 */}
            <div className="bonus_distribution">
                BonusDistribution
            </div>
        </div>
    )
}

css

.container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #ccc;
}
.top_selete {
        display: flex;
        height: 88px;
        padding-top: 16px;
        justify-content: space-between;
        font-size: 13px;
        font-family: PingFangSC-Medium, PingFang SC;
        background-color: #005587FF;
        color: #fff;
        select {
            width: 108px;
                height: 23px;
                color: #fff;
                margin-left: 5px;
                border-radius: 5px;
                border: 1px solid #fff;
                background-color: #005587FF;
        }
        .left {
            flex: 1;
            margin-left: -20px;
            select {             
                margin-left: 8px;
                // background-color: red;
            } 
        }
        .right {
            flex: 1;
            select {
                margin-left: 8px;
                margin-right: 9px;
            }
        }
    }

// 达成率
.yield_rate {
    // display: flex;
    justify-content: center;
    height: 188px;
    margin: -32px 16px 10px 16px;
    // border: 1px solid black;
    border-radius: 5px 5px 0 0;
    background-color: #fff;
}

// 销售分布
.sales_distribution {
    flex: auto;
    // justify-content: center;
    // width: 343px;
    height: 214px;
    margin: 5px 16px 10px 16px;
    // border: 1px solid black;
    border-radius: 10px 10px 0 0;
    background-color: #fff;  

}


// 销售明星
.sales_star {
    flex: auto;
    // width: 343px;
    height: 402px;
    margin: 5px 16px 10px 16px;
    // border: 1px solid black;
    border-radius: 10px 10px 0 0;
    background-color: #fff;
}
// 岗位覆盖
.post_cover {
    flex: auto;
    // width: 343px;
    height: 355px;
    margin: 50px 16px 10px 16px;
    // border: 1px solid black;
    border-radius: 10px 10px 0 0;
    background-color: #fff;

}
// 奖金分布
.bonus_distribution {
    flex: auto;
    // width: 343px;
    height: 200px;
    margin: 5px 16px 17px 16px;
    border: 1px solid black;
    border-radius: 10px 10px 0 0;
    background-color: #fff;
}
.ant-table-thead {
    background: #f40 !important;
}

实习的一天以一篇自导自演的文章结束啦。