Html 带包装的内部中心对齐DIV

我试图编写一个元素，该元素在满足以下条件的同时，按照以下条件流畅地运行：

如果有足够的空间，总是把两个孩子分组在父母中间，同时保持它们之间的差距

如果父母太小，不能让孩子们并排在一起，就把他们包裹起来，这样他们就在彼此下面了

最好在没有媒体查询和JavaScript的情况下完成所有这些操作。

直观地说，我使用了CSS网格，这是我迄今为止的进展：

.wrapper{
最大宽度：100雷姆；
填充：1rem；
边框：5px纯红；
}
.电网{
显示：网格；
网格模板柱：1fr 1fr；
差距：1雷姆1雷姆；
}
.一{
自我辩护：结束；
背景色：黑色；
宽度：10雷姆；
高度：10雷姆；
}
.二{
背景色：黑色；
宽度：10雷姆；
高度：10雷姆；
}
#自动装配{
边缘顶部：3rem；
}
#自动调整网格{
网格模板列：重复（自动拟合，最小值（100px，1fr））；
差距：1雷姆1雷姆；
}
#自动装配，一个{
保证金：0自动；
}
#自动装配，两个{
保证金：0自动；
}

StackOverflow内在分组问题
您的问题可以通过
网格
解决，也可以通过媒体查询
和
javascript
解决

对于第一个
.grid
网格，添加以下规则：

grid-template-columns: repeat(auto-fit, minmax(10rem, auto));
justify-content: center;

grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
justify-content: center;

对于第二个
#auto-fit.grid
网格，添加以下规则：

grid-template-columns: repeat(auto-fit, minmax(10rem, auto));
justify-content: center;

grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
justify-content: center;

你会得到你想要的结果


.wrapper{
最大宽度：100雷姆；
填充：1rem；
边框：5px纯红；
}
.电网{
显示：网格；
网格模板列：重复（自动拟合，最小值（10rem，自动））；
差距：1雷姆1雷姆；
证明内容：中心；
}
.一{
自我辩护：结束；
背景色：黑色；
宽度：10雷姆；
高度：10雷姆；
}
.二{
背景色：黑色；
宽度：10雷姆；
高度：10雷姆；
}
#自动装配{
边缘顶部：3rem；
}
#自动调整网格{
网格模板列：重复（自动拟合，最小值（10rem，1fr））；
差距：1雷姆1雷姆；
证明内容：中心；
}
#自动装配，一个{
保证金：0自动；
}
#自动装配，两个{
保证金：0自动；
}

StackOverflow内在分组问题
不太熟悉网格布局，但具有环绕和中心对齐功能的Flex布局可以工作


#父级{
边框：2倍实心；
宽度：300px；
调整大小：水平；
溢出：自动；
显示器：flex；
flex：行；
柔性包装：包装；
证明内容：中心；
}
#父级>div{
高度：50px；
宽度：50px；
利润率：10px；
背景色：红色；
}

您喜欢flex还是grid？从你发布的图片来看，Flex更合适。在这方面我没有偏好。唯一的两个条件是没有媒体查询和JS。我给出了
网格的解决方案。您是否需要对上面的块（
.one
）执行相同的操作？使用
网格
比
flex
兼容性差，我通常只建议您在确实无法很好地管理
flex
时使用
网格
。我有一个可视化的
flex
工具，如果你真的想看看
flex
能做什么，我可以在今天晚些时候发布它。@John，现在，
grid
可以非常自由地使用。