flex加 grid 布局笔记

<style>
    .flex-container {
        display: flex;
        height: 100%; /* 设置容器的高度 */
    }
    .wide {
        display: flex;
        padding: 10px;
        border: 1px solid lightgray;
        text-align: center;
        justify-content: center; /* 在水平方向上居中 */
        align-items: center; /* 在垂直方向上居中 */
        width: 50%;
    }
    .grid-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 创建两列 */
        grid-template-rows: repeat(2, 1fr); /* 创建两行 */
        gap: 50px; /* 设置列和行之间的间距 */
    }

    .grid-item {
        width: 140px;
        height: 140px;
        background-color: white;
        padding: 20px;
        text-align: center;
        display: grid;
        border: 1px solid #4974A4;
        place-items: center;
       
    }
        .active {
            background-color: #4974A4;
            color: #fff;
        }
    .grid-item {
        transition: background-color 0.3s ease;
    }
        .grid-item:hover:hover {
            background-color: #4974A4;
            color: #fff;
        }
       
        /*.grid-item img {
            width: 140px;
            height: 100px;
        }*/
    .container {
        display: flex;
        flex-direction: column; /* 竖向排列 */
        align-items: center; /* 居中对齐 */
        height: 300px; /* 设置容器高度 */
        border: 1px solid #ccc; /* 边框用于可视化 */
    }

    .item {
        width: 300px;
        height: 50px;
        margin: 50px;
        text-align: center;
        line-height: 50px;
        border: 1px solid #4974A4;
        color: black;
    }
        .item:hover {
            background-color: #4974A4;
            color: #fff;
        }

//灰色线
     .gray-hr {
            border: none;
            border-top: 1px solid #ccc; /* 灰色边框线 */
            margin: 10px 0; /* 可以调整线的上下间距 */
        }
</style>
<div class="flex-container">
    <div class="wide">
        <div class="grid-container" id="typeContainer">
            
                        <div class="grid-item" οnclick="typeClick(@ele.Code)" id="type_@ele.Code">

                           
                                <img src="@ele.STRING_1"  />
                                <span style=" font-size: 16px; font-weight:bold">@ele.TextValue</span>
                           

                        </div>
                    }
                    }
                }

            </div>
    </div>
    <div class="wide"  id="typeChildContainer" style="display: none; flex-direction: column"><div  id="containers"></div>
                                                                    </div>
</div>