记录一波flex默认让div水平小于1200上下排列(重构zan-admin时学习)

最新推荐文章于 2024-06-13 08:28:05 发布

「已注销」

最新推荐文章于 2024-06-13 08:28:05 发布

阅读量126

点赞数

https://github.com/gztrljh

本文链接：https://blog.csdn.net/ljh101/article/details/108945957

版权

还是要对flex布局比较熟悉的才能做出来，如果不熟悉的话，建议还是用传统的

float display: inline-block; 这种方式来做，

第一种:多用flex中的相关属性布局

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>zan-admin</title>
    <script src="static/js/checkie&edge.js"></script>
    <link href="static/css/bootstrap.css" rel="stylesheet">
    <link href="static/css/zan-admin.css" rel="stylesheet">
    <style>
        header {
            top: 0;
            left: 0;
            right: 0;
            height: 52px;
            /* 固定布局 */
            position: fixed;
            display: flex;
        }



        .left {
            height: inherit;
            /* 左侧菜单的宽度 */
            /* 这个属性也是指定宽度的 */
            /* flex-basis: 240px; */
            width: 240px;
            background-color: #e7e7e7;


        }

        .right {

            height: inherit;
            /* 占满剩下所有的宽度 */
            /* 注意：这里设置100%宽度是没有用的，则.left设置的宽度将会失效，因为100%是表示整个主轴的不是扣掉240px剩下的 */
            /* 小结:flex中要控制宽度啥的还是要注意，里面还是有些学问的; */
            /* width: 100%; */
            /* width: 50px; */
            flex-grow:1;
            background-color: #cccc;
        }


        main {
            padding-top: 52px;
        }


        @media screen and (max-width: 1200px) {
            header {
                display: flex;
                /* 注意：这个换行属性，是占满主轴宽度的时候才会换行，会换行的原因是下面设置了flex-basis: 100%; */
                flex-wrap: wrap;
            }

            .left {
                width: 100%;
            }

            /* 缩小时变成距离顶部104px */
            main {
                padding-top: 104px;
            }


        }
    </style>
</head>

<body>


    <header>


        <div class="left"> left</div>
        <div class="right">right </div>


    </header>


    <main>
        这是主要内容
    </main>






    <script src="static/js/jquery.min.js"></script>
    <script src="static/js/bootstrap.min.js"></script>

</body>

</html>

第二种：min-width大法(推荐)

zan-admin

<header>


    <div class="left"> left</div>
    <div class="right">right </div>


</header>


<main>
    这是主要内容
</main>






<script src="static/js/jquery.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>

第三种：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
    <title>zan-admin</title>
    <style>
        html,body {
            background-color: red;
            overflow-x: hidden;
        }

        .container {
            background-color: green;
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            border: 1px solid #666666;
            width: 240px;
        }

        .brand {
            height: 52px;
            background-color: transparent
        }

        .side {
            background-color: #e7e7e7;
            top: 52px;
            position: absolute;
            overflow-y: auto;
            bottom: 0;
            left: 0;
            right: 0;
        }

        button {
            margin-left: 250px;
        }

        @media screen and (max-width: 1200px) {
            .container {
                background-color: tomato;
                transform: translateX(-100%);
            }

            .container.ani {
                transition: 0.3s;
            }

            .container.move {
                transform: translateX(0);
            }

            .container.back {
                transform: translateX(-100%);
            }
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>



        $(function () {

            var t = false;
           

            $('button').on("click", function () {
                t = !t;
                if (t) {
                    // console.log("ddd")
                    $('.container').addClass('ani').removeClass('back').addClass('move');
                } else {
                    // $('.container').addClass('ani').addClass('move');
                    $('.container').addClass('ani').removeClass('move').addClass('back');
                    // console.log("aaaa")
                }
                // 

            });
        });

    </script>
</head>

<body>
    <div class="container">
        <div class="brand">
            toubu
        </div>
        <div class="side">
            <h1>内容begin</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容</h1>
            <h1>内容end</h1>
        </div>
    </div>
    <button>toggle</button>
</body>

</html>

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
记录一波flex默认让div水平小于1200上下排列(重构zan-admin时学习)

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title&gt..
复制链接

扫一扫