html - 显示 9x9 div/grid css
问题描述
我正在尝试使用以下 css 制作一个 9x9 div,但如果我显示 4 个 div,如下图所示,它会崩溃
这是我的CSS
.grid {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.cell {
flex: 0 0 33%;
height: 100px;
width: 100px;
margin-bottom: 5px;
}
<div class="grid">
<div class="cell" style="background-color: green">1</div>
<div class="cell" style="background-color: red">1</div>
<div class="cell" style="background-color: blue">1</div>
<div class="cell" style="background-color: yellow">1</div>
</div>
我想要的输出是一个 css,它允许我的网格显示以下内容
解决方案
尝试
justify-content : flex-start;
反而。这使子元素从每行的左侧打包。
推荐阅读
- python - 创建具有多个子文件夹的文件夹
- regex - 如何从 OpenCart 3.0 上的所有链接中删除 route=
- html - jQuery 代码没有使用变量加速
- reactjs - 来自嵌套组件的反应路由链接
- javascript - 如何从 mapbox 自定义弹出窗口
- singly-linked-list - 是否有一套通用指令来交换链表中的相邻和不相邻记录?
- azure-data-factory - Azure 数据工厂 Webhook 主体问题
- r - 是否有用于将多列旋转到同一行的 R 函数?
- visual-studio - .NET 5.0 和 ADO.NET 模型
- python - 为什么准确率突然下降但损失仍在减少?