h5页面弹性布局，固容器定高度，内部组件不固定高度

100

101

102

103

104

105

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 默认360浏览器为兼容模式 -->
    <meta name="renderer" content=webkit>
    <title>test</title>
    <style>
        .index-content {
            margin-top: 1.5%;
            border-radius: 10px;
            background: #CCC;
        }
 
        .index-day-content {
            height: 83%;
            display: flex;
            flex-wrap: wrap;
            flex-flow: row wrap;
            padding-bottom: 1%;
        }
 
        .index-day-box {
            display: flex;
            flex-direction: column;
            width: 23%;
            background: #F6F5FA;
            border-radius: 10px;
            margin: 1% 1% 0% 1%;
            align-items: center; /*垂直居中*/
            justify-content: center; /*水平居中*/
        }
 
 
        .index-day-box .index-day-text {
            font-size: 1rem;
        }
 
 
 
        .real-time-war-report {
            font-size: 1.9rem;
            letter-spacing: 0px;
            color: #387FF5;
            text-align: center;
            font-weight: bold;
        }
 
    </style>
</head>
 
<body>
 
 
<!-- 日指标 -->
<div style="height: 25%" class="index-content">
 
    <div class="index-day-content">
        <div class="index-day-box">
            <div class="real-time-war-report">
                1123213
            </div>
            <div class="index-day-text">
                数据指标
            </div>
        </div>
        <div class="index-day-box">
            <div class="real-time-war-report">
                1123213
            </div>
            <div class="index-day-text">
                数据指标
            </div>
        </div>
        <div class="index-day-box">
            <div class="real-time-war-report">
                1123213
            </div>
            <div class="index-day-text">
                数据指标
            </div>
        </div>
        <div class="index-day-box">
            <div class="real-time-war-report">
                1123213
            </div>
            <div class="index-day-text">
                数据指标
            </div>
        </div>
        <div class="index-day-box">
            <div class="real-time-war-report">
                1123213
            </div>
            <div class="index-day-text">
                数据指标
            </div>
        </div>
 
    </div>
</ion-slide>
 
 
</body>
</html>