只用一行 CSS，秒解决布局难题

主要观点总结

本文介绍了在Web布局中遇到的常见问题，特别是使用div元素时的布局难题。文章提到了flex: 1和object-fit: cover这两个CSS技巧，前者能够在布局中均分空间，解决div元素不听话的问题；后者能够智能裁剪和缩放图片，保持图片的长宽比不变。文章总结了遇到布局难题时，可以使用这些被低估的CSS技巧，让UI更清爽，开发更舒畅。

关键观点总结

关键观点1: flex: 1 的魔力

介绍 flex: 1 如何解决布局问题，包括其三个组成部分：flex-grow: 1、flex-shrink: 1 和 flex-basis: 0%。

关键观点2: object-fit: cover 的作用

解释 object-fit: cover 如何智能裁剪和缩放图片，保持图片长宽比，适用于多种视觉展示场景。

关键观点3: 文章总结

总结文章主要观点，即在遇到Web布局难题时，优先考虑使用 flex: 1 和 object-fit: cover 这两个CSS技巧，而不是立刻使用JavaScript或复杂的Grid布局。

免责声明