weixin_43487782的博客

项目中遇到很多需要元素高度自动充满容器剩余高度的情况，之前项目用了很多calc()，页面元素多了之后维护很麻烦。使用flex布局就能很容易实现元素自动填充剩余高度的效果。 先来回顾一下flex布局的主要属性： 容器属性： flex-direction flex-wrap flex-flow justify-content align-items align-content 项目属性： order flex-grow flex-shrink flex-basis flex align-self 之前项

默认情况下容器flex-wrap: nowrap;项目不换行，项目单行显示，容器空间不足时，项目宽度会被压缩 .box { flex-wrap: nowrap; } 当给容器设置了flex-wrap: wrap;时，容器空间不足时，项目在容器内排布会进行换行，此时项目不会被压缩 项目的flex-shrink属性定义了项目的缩小比例，默认为1，即空间不足，该项目将缩小。在容器设置flex-wrap: nowrap;不换行的情况下，将所有项目的flex-shrink: 0;项目不会压缩，容器..