Flexbox 不会换行在网格元素内-解网

问：

我目前正在自学网格和弯曲。

谁能告诉我我在这里做错了什么？我希望 flexbox 中的项目环绕在单个网格内容内，并使该元素增长以适合其中的所有 flex box 项目。

我有一个 css 网格来设置我的基本布局，但我希望（单个）网格内容单元格有一个弹性框作为其内容，以便一系列内容项将环绕在这个单个网格项内。

我的html看起来像这样：

<html>
    <head>
        <link rel="stylesheet" href="general.css">
        <link rel="stylesheet" href="grid-2.css">
        <link rel="stylesheet" href="flexbox.css">
        
        <title>Grid and flex</title>
    </head>
    <body >
        <div class="grid_container">
            <div class="grid-item grid-header">header</div>
            <div class="grid-item grid-sidebar">sidebar</div>
            <div class="grid-item grid-content flex-container">item 1
                <div class="flex-item flex-content">item 1</div>                
                <div class="flex-item flex-content">item 2</div>
                <div class="flex-item flex-content">item 3</div>
                <div class="flex-item flex-content">item 4</div>
                <div class="flex-item flex-content">item 5</div>
                <div class="flex-item flex-content">item 6</div>
                <div class="flex-item flex-content">item 7</div>
                <div class="flex-item flex-content">item 8</div>
                <div class="flex-item flex-content">item 9</div>
                <div class="flex-item flex-content">item 10</div>
                <div class="flex-item flex-content">item 11</div>
                <div class="flex-item flex-content">item 12</div>
                <div class="flex-item flex-content">item 13</div>
                <div class="flex-item flex-content">item 14</div>
                <div class="flex-item flex-content">item 15</div>
                <div class="flex-item flex-content">item 16</div>
                <div class="flex-item flex-content">item 17</div>
                <div class="flex-item flex-content">item 18</div>
                <div class="flex-item flex-content">item 19</div>
                <div class="flex-item flex-content">item 20</div>
                <div class="flex-item flex-content">item 21</div>
                <div class="flex-item flex-content">item 22</div>
            </div>
            <div class="grid-item grid-footer">footer</div>
        </div>
    </body>
</html>

我的 grid-2.css 如下所示： /* 网格 CSS*/

.grid_container {
    display: grid;
    /* margin: 1em; */
    /* padding: 1em; */
    grid-template-columns: repeat(5, 1fr);
    width: 300px;
}
.grid-item {
    background-color: steelblue;
    color: white;
    border: skyblue 1px solid;
}

.grid-sidebar {
    grid-row-start: 2;
    grid-row-end: 8;
}

.grid-header {
    grid-column: 1/6;
    font-size: 2em;
}

.grid-footer {
    grid-column: 1/6;
}

.grid-content {
    grid-row-start: 2;
    grid-row-end: 3;
    width: 50em;
}

我的 flexbox.css 看起来像这样：

/* flexbox css */

.flex-container {
    display: flex;
}

.flex-item {
    width: 10em;

}

.flex-content {
    border-radius: 1em; /* use this to give a nice rounded border to our items */
    flex-wrap: wrap;
    margin: 1em;
    padding: 1em;
    font-size: 1.5em; 
    justify-content: center; /* main axis alignment */
    align-items: center; /* cross axis alignment */
    align-content: flex-start;
    gap: 2em;
    border-style: solid;
    border-color: white;

}

但是，flexbox 项目似乎不是包装，而是从元素的侧面消失了，因此：

css 弹性框 css-grid

Flexbox 不会换行在网格元素内

Flexbox doesn't wrap inside a grid element

评论