【html】用html模拟微信布局

您做的这个模拟微信布局的作品很不错，使用了Flexbox布局来实现元素的灵活排列。以下是关于您代码的一些分析和建议：

效果图：

代码分析：

全局样式重置：

您使用了* { margin: 0; padding: 0; }来重置所有元素的边距。这是一个常见的做法，可以避免不同浏览器默认样式的差异。

Flexbox布局：

#container被设置为display: flex;，这使得它的子元素（#function，#people，#chat）按照flex规则排列。

Flex比例分配：

通过给不同的元素设置不同的flex值，您实现了屏幕空间的自定义分配。例如，#chat元素占据了大部分空间（flex: 31），而#people和#function则分别占据了较小的部分。

颜色与样式：

您为不同的元素设置了不同的背景颜色，并为.person元素添加了hover效果，增强了交