flex：1只能是在水平的时候瓜分空间么

来源：3-2 项目作业

陈立天

2020-09-13 23:01:42

垂直瓜分不了剩余空间吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,maximum-scale=1.0,minimum-scale=1">
    <title>订单</title>
    <script src="../lib/jquery.js"></script>
    <!-- 适配方案 -->
        <script type="text/javascript">
            (function($) {
                'use strict'
                var docEl = document.documentElement;

            // 解决dpr一边框像素问题
            var dpr = window.devicePixelRatio || 1,
                viewPortEl = document.querySelector('meta[name="viewport"]'),
                maxWidth = 540,
                minWidth = 320;

            dpr = dpr >= 3 ? 3:(dpr >= 2 ? 2 :1);

            docEl.setAttribute('data-dpr',dpr);
            docEl.setAttribute('max-width', maxWidth);
            docEl.setAttribute('min-width', minWidth);

            var scale = 1/ dpr,
            content = 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' +scale+',user-scalable=no';  

            if(viewPortEl){
                viewPortEl.setAttribute('content',content);
            }else{
                viewPortEl = createElement('meta');
                viewPortEl.setAttribute('name','viewport');
                viewPortEl.setAttribute('content',content);
                document.head.appendChild(viewPortEl);
            }

            // 设置Rem的单位
            function setRemUnit(){
                // 获取rem基准值
                var viewWidth = docEl.clientWidth;
                
                if(viewWidth && (viewWidth / dpr > maxWidth)) {
                    viewWidth = maxWidth * dpr;
                }else if(viewWidth && (viewWidth / dpr < minWidth)){
                    viewWidth = minWidth * dpr;
                }

                var rem =viewWidth / 10;

                docEl.style.fontSize= rem + 'px';
            }
            setRemUnit();

            // 页面发生变化执行setRemUnit方法计算html根元素的font-size
            window.addEventListener('resize',setRemUnit);
            window.addEventListener('pageshow',setRemUnit);
            })(jQuery);
    </script>

    <link rel="stylesheet" href="../lib/base.css">
    <link rel="stylesheet" href="../commom/bottomBar/bottomBar.css">
    <link rel="stylesheet" href="./my.css">

</head>
<body>
    <div class="my">
        <div class="header">
            <img src="http://i.waimai.meituan.com/static/img/default-avatar.png" alt="头像" class="avatar">
            <p class="nickname">美团小骑手</p>
        </div>
        <div class="content">
            <ul class="items">
                <li class="address">收货地址管理</li>
                <li class="money">商家代金券</li>
            </ul>
            <ul class="items">
                <li class="email">意见反馈</li>
                <li class="question">常见问题</li>
            </ul>
            <p class="tel"></p>
            <p class="time"></p>
        </div>
    </div>
    

    <div class="bottom-bar">
        <!-- js-loading -->
    </div>
    <script src="../lib/jquery.js"></script>
    <script src="../commom/bottomBar/bottomBar.js"></script>

</body>
</html>

.my{
    display: flex;
    flex-direction: column;
}
.header{
    width: 100%;
    height: 4.266667rem;
    background-image: url(./img/header.png);
    background-size: cover;
    overflow: hidden;
}
.avatar{
    width: 1.92rem;
    height: 1.92rem;
    border: 0.08rem solid rgba(255,255,255,0.4);
    border-radius: 50%;
    margin: 0 auto;
    margin-top: 0.666667rem;
    display: block; 
}
.nickname{
    color: #333;
    font-size: 0.426667rem;
    text-align: center;
    margin-top: 0.4rem;
}
.content{
    height: 13.52rem;
}

写回答

1回答