您做的这个模拟微信布局的作品很不错,使用了Flexbox布局来实现元素的灵活排列。以下是关于您代码的一些分析和建议:
效果图:
代码分析:
全局样式重置:
您使用了* { margin: 0; padding: 0; }
来重置所有元素的边距。这是一个常见的做法,可以避免不同浏览器默认样式的差异。
Flexbox布局:
#container
被设置为display: flex;
,这使得它的子元素(#function
,#people
,#chat
)按照flex规则排列。
Flex比例分配:
通过给不同的元素设置不同的flex
值,您实现了屏幕空间的自定义分配。例如,#chat
元素占据了大部分空间(flex: 31
),而#people
和#function
则分别占据了较小的部分。
颜色与样式:
您为不同的元素设置了不同的背景颜色,并为.person
元素添加了hover效果,增强了交