flex布局demo

2024年3月25日 105次阅读 来源: 园中桥

示例一：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html {
            height: 100%;
        }
        body {
            height: 100%;
        }
        .outer {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
            border: 1px solid #aaa;
            box-sizing: border-box;
       }
       .header {
            width: 100%;
            height: 25px;
            text-align: center;
            border: 1px solid #ccc;
            box-sizing: border-box;
       }
       .content {
            flex: 1;
            min-height: 0;
            height: 100%;
            overflow-y: auto;
       }
</style>
</head>
<body>

<div class="outer">
    <div class="header">header</div>
    <div class="content">
        first<br/> content<br/><br/>content<br/><br/>content<br/><br/>content<br/><br/>content<br/><br/>content<br/><br/>content<br/><br/>content<br/><br/>content<br/><br/>
        content<br/><br/>content<br/><br/>content<br/><br/>content<br/><br/>content<br/><br/>content<br/><br/>content<br/><br/>content<br/><br/>contentcontentcontent<br/>
        contentcontent<br/><br/>content<br/><br/>content<br/><br/>content<br/><br/>content<br/><br/>content<br/><br/>content<br/><br/>content<br/><br/>content<br/><br/>
        content<br/><br/>content<br/><br/>content<br/><br/>content<br/><br/>content<br/><br/>content<br/><br/>content<br/><br/>content<br/><br/>contentcontentcontent<br/>
        content
        end
    </div>
</div>
</body>
</html>

示例二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="xhh">
    <title>flex</title>
    <style>
    #payList {
        width: 830px;
        height: 270px;
        border: 1px solid #d7d7d7;
        overflow-y: auto;
        padding: 10px 5px 5px 15px;
        font-size: 14px;
        font-family: "Microsoft Yahei";
    }
    #payList .payUl {
        margin: 0;
        padding: 0;
        width: 100%;
        list-style: none;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }
    #payList .payUl .listItem {
        display: -webkit-flex;
        display: flex;
        flex: 1;
        min-height: 40px;
        cursor: pointer;
    }
    #payList .payUl .item-welt {
        display: -webkit-flex;
        display: flex;
    }
    #payList .payUl .item-welt .item-welt-line {
        position: relative;
        width: 2px;
        margin-left: 10px;
        margin-right: 10px;
        background-color: #f3f3f3;
    }
    #payList .payUl .listItem:last-child .item-welt-line {
        height: 0;
    }
    #payList .payUl .item-welt-line::after {
        content: "";
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        position: absolute;
        width: 12px;
        height: 12px;
        top: 0%;
        left: 50%;
        transform: translateX(-50%);
        -webkit-border-radius: 50%;
        border-radius: 50%;
        background-color: #f0f0f0;
    }
    #payList .listItem .item-info {
        display: -webkit-flex;
        display: flex;
        margin-left: 10px;
        margin-top: 0;
    }
    #payList .listItem .item-info > p {
        margin: 0 2px;
    }
    #payList .listItem .item-info > div {
        -webkit-flex: 1;
        flex: 1; 
    }
    #payList .item-info-time,
    #payList .item-info-process {
        color: #949494;
    }
    #payList .item-info-person {
        color: #00f;
    }
    </style>
</head>
<body>
<div id="payList">
    <ul class="payUl">
        <li class="listItem">
            <div class="item-welt">
                <div class="item-welt-line">
                </div>
            </div>
            <div class="item-info">
                <p class="item-info-time">
                    2017-03-09 00:00:00
                </p>
                <p class="item-info-person">
                    system
                </p>
                <p class="item-info-process">
                    【普通投诉处理中心】【审批承认】
                </p>
                <div class="item-info-content">
                    立即处理。立即处理。-----
                </div>
            </div>
        </li>
        <li class="listItem">
            <div class="item-welt">
                <div class="item-welt-line">
                </div>
            </div>
            <div class="item-info">
                <p class="item-info-time">
                    2017-03-09 00:00:00
                </p>
                <p class="item-info-person">
                    system
                </p>
                <p class="item-info-process">
                    【普通投诉处理中心】
                </p>
                <div class="item-info-content">
                    立即处理。立即处理。立即处理。立即处理.立即处理。立即处理立即处理。立即处理立即处理。立即处理立即处理。立即处理立即处理。立即处理立即处理。立即处理立即处理。立即处理立即处理。立即处理立即处理。立即处理立即处理。立即处理立即处理。立即处理----- 
                </div>
            </div>
        </li>
        <li class="listItem">
            <div class="item-welt">
                <div class="item-welt-line">
                </div>
            </div>
            <div class="item-info">
                <p class="item-info-time">
                    2017-03-09 00:00:00
                </p>
                <p class="item-info-person">
                    system
                </p>
                <p class="item-info-process">
                    【普通投诉处理中心】【审批承认】
                </p>
                <div class="item-info-content">
                    立即处理。立即处理。-----
                </div>
            </div>
        </li>
        <li class="listItem">
            <div class="item-welt">
                <div class="item-welt-line">
                </div>
            </div>
            <div class="item-info">
                <p class="item-info-time">
                    2017-03-09 00:00:00
                </p>
                <p class="item-info-person">
                    system
                </p>
                <p class="item-info-process">
                    【普通投诉处理中心】【审批承认】
                </p>
                <div class="item-info-content">
                    立即处理。立即处理。-----
                </div>
            </div>
        </li>
        <li class="listItem">
            <div class="item-welt">
                <div class="item-welt-line">
                </div>
            </div>
            <div class="item-info">
                <p class="item-info-time">
                    2017-03-09 00:00:00
                </p>
                <p class="item-info-person">
                    system
                </p>
                <p class="item-info-process">
                    【普通投诉处理中心】【审批承认】
                </p>
                <div class="item-info-content">
                    提价了订单的差评赔款单
                </div>
            </div>
        </li>
        <li class="listItem">
            <div class="item-welt">
                <div class="item-welt-line">
                </div>
            </div>
            <div class="item-info">
                <p class="item-info-time">
                    2017-03-09 00:00:00
                </p>
                <p class="item-info-person">
                    xhh
                </p>
                <p class="item-info-process">
                    【普通投诉处理中心】【审批承认】
                </p>
                <div class="item-info-content">
                    提价了订单的差评赔款单
                </div>
            </div>
        </li>
        <li class="listItem">
            <div class="item-welt">
                <div class="item-welt-line">
                </div>
            </div>
            <div class="item-info">
                <p class="item-info-time">
                    2017-03-09 00:00:00
                </p>
                <p class="item-info-person">
                    system
                </p>
                <p class="item-info-process">
                    【普通投诉处理中心】【审批承认】
                </p>
                <div class="item-info-content">
                    提价了订单的差评赔款单
                </div>
            </div>
        </li>
        <li class="listItem">
            <div class="item-welt">
                <div class="item-welt-line">
                </div>
            </div>
            <div class="item-info">
                <p class="item-info-time">
                    2017-03-09 00:00:00
                </p>
                <p class="item-info-person">
                    system
                </p>
                <p class="item-info-process">
                    【普通投诉处理中心】【审批承认】
                </p>
                <div class="item-info-content">
                    提价了订单的差评赔款单
                </div>
            </div>
        </li>
    </ul>
</div>    
</body>
</html>
    原文作者：园中桥
    原文地址: https://segmentfault.com/a/1190000008611902
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞