CSS_FlEX的简单例子1

页面效果

源码下载地址

部分直接置下

/* index.css */
body {
    max-width: 320px;
    max-width: 540px;
    margin: 0 auto;
    font:normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "microsoft Yahei", STXihei, hei;
    color: #000;
    background: #f2f2f2;
    overflow-x: hidden;
    -webkit-tap-highlight-color:transparent;

}

.bigdiv {
    top: 25%;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    max-width: 320px;
    max-width: 540px;
    width: 60%;
    height: 487px;
    display: flex;
    flex-direction: column;
    background: gray;
}

.myorder {
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    height: 54px;
    background: rgb(255, 255, 255);
}

.myorder_ {
    flex: 1;
    height: 38px;
    line-height: 38px;
    text-align: center;
    font-size: large;
    font-weight: bold;
    color: white;
    border:1px solid #ccc;
    background: rgb(224, 22, 22);

    border-radius:25px;
}

.secondbigdiv {
    display: flex;
    height: 300px;
    flex-direction: row;
    background: rgb(255, 255, 255);
}

.secondbigdiv_left {
    display: flex;
    flex: 1;
    flex-direction: column;
    background: rgb(255, 255, 255);
}

.secondbigdiv_left_top {
    display: flex;
    flex: 5;
    justify-content: center;
    align-items: center;
    background: rgb(255, 255, 255);
}

.secondbigdiv_left_top_ {
    flex: 1;
    height: 150px;
    margin-left: 3%;
    margin-right: 3%;
    background: rgb(57, 180, 174);
    border-radius:25px;
}

.secondbigdiv_left_top_ img {
    position: relative;
    left: 0%;
    right: 0%;
    width: 100%;
    height:100%;
}

.secondbigdiv_left_bottom {
    display: flex;
    flex: 4;
    justify-content: center;
    align-items: center;
    background: rgb(255, 255, 255);
}

.secondbigdiv_left_bottom_ {
    flex: 1;
    height: 120px;
    margin-left: 3%;
    margin-right: 3%;
    background: rgb(113, 115, 116);
    border-radius:25px;
}

.secondbigdiv_left_bottom_ img {
    width: 100%;
    height:100%;
}

.secondbigdiv_right {
    height: 300px;
    display: flex;
    flex: 1;
    flex-direction: row;
    background: rgb(255, 255, 255);
}

.secondbigdiv_right_ {
    height: 295px;
    flex: 1;
    margin: 1% 5%;
    background: rgb(113, 182, 136);
    border-radius: 25px;
}

.secondbigdiv_right_ img {
    width: 90%;
    height:90%;
}

.thirdbigdiv {
    display: flex;
    flex-direction: column;
    justify-items: center;
    height: 133px;
    background-color: rgb(255, 255, 255);
}

.thirdbigdiv_ {
    display: flex;
    flex: 2;
    margin: 6.6px;
    display: flex;
    height: 20px;
    background-color: rgb(145, 85, 137);
    border-radius:25px;
}

.thirdbigdiv_right_left {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.thirdbigdiv_right_left_font1 {
    display: flex;
    flex: 1;
    position: relative;
    left: 40%;
    top: 10%;
    font-weight: 1000;
    color: #f2f2f2;
}

.thirdbigdiv_right_left_font2 {
    display: flex;
    flex: 1;
    position: relative;
    left: 40%;
    bottom: 10%;
    font-weight: 1000;
    color: #f2f2f2;
}

.thirdbigdiv_right_right {
    flex: 5;
}

.thirdbigdiv_ img {
    width: 100%;
    height:100%;
}

.p_1 {
    position: relative;
    top: -110%;
    left: 7%;
    font-weight: 1000;
    font-size: large;
    color: #f2f2f2;
}

.p_2 {
    position: relative;
    left: 10px;
    top: 0px;
    font-weight: 1000;
    font-size: large;
    color: #f2f2f2;
}

/* index.html */



    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <title>test01</title>


    <div class="bigdiv">
        <div class="myorder">
            <div class="myorder_">我 的 订 单</div>
        </div>

        <div class="secondbigdiv">
            <div class="secondbigdiv_left">
                <div class="secondbigdiv_left_top">
                    <div class="secondbigdiv_left_top_">
                        <img src="../exercise01/images/1.png" alt="1">
                    </div>
                </div>
                <div class="secondbigdiv_left_bottom">
                    <div class="secondbigdiv_left_bottom_">
                        <img src="../exercise01/images/2.png" alt="2">
                        <p class="p_1">团建</p>
                    </div>
                </div>
            </div>
            <div class="secondbigdiv_right">
                <div class="secondbigdiv_right_">
                    <p class="p_2">食堂</p>
                    <img src="../exercise01/images/3.png" alt="3">
                    
                </div>
            </div>
        </div>
        <div class="thirdbigdiv">
            <div class="thirdbigdiv_">
                <div class="thirdbigdiv_right_left">
                    <p class="thirdbigdiv_right_left_font1">海淘</p>
                    <p class="thirdbigdiv_right_left_font2">精选</p>
                </div>
                <div class="thirdbigdiv_right_right">
                    <img src="../exercise01/images/4.png" alt="4">
                </div>
                
            </div>
        </div>
    </div>