hello 朋友们，我又来了哦！对的没错，今天的话题呢就是高度塌陷。 　　首先要知道什么是高度塌陷。高度塌陷其实就是指当父元素没有给确定的高度（即父元素高度靠子元素撑起来），并且子元素添加了浮动时，内容无法撑起父元素的高度，即父元素发生高度塌陷。 　　解决办法： 　　　　第一种，开启元素 ...

当元素的高度和(宽度和)大于容器的高度(宽度)时,元素的高度(宽度)会被压缩,如果不想被压缩,元素添加属性 flex-shrink: 0; ...

　　查遍各大资源无任何flex嵌套布局的例子，经过自己折腾完成了项目中的高度自适应需求（更多应用于前端组件） 效果图： html代码：（关键地方已经用颜色特别标识 ^_^） 总结： 　　flex布局嵌套的关键，就是对item进行容器定位，赋予flex特性 ...

今天重写了一个移动端的页面，改完后才发现页面中间需要自适应高度，传统的获取高度设置方法并不能实现页面想要的效果，便对原有页面样式进行了一下研究，发现原有页面是用flex布局实现自适应，于是照搬写法，却始终无法向原有页面一样自适应高度，但写法都是一样的，最后仔细将页面的结构性元素的样式尝试修改了一边 ...

这里面给div定义了display:-webkit-flex;和flex-direction:row;align-items:center;属性，三个子元素垂直居中，justify-content:flex-end;三个元素靠右，想让第一个元素向左浮动，解决方法："我的课表"加 ...

在使用flex布局时，若出现换行，有两种较为特殊的现象是值得我们研究的： 子元素高度被拉伸，其实际高度大于它的内容高度。 各行子元素之间的行间距过大，甚至我们根本没有给子元素设置margin。 现在我们将要探究引发这两种现象的原因及解决方案。 一、子元素高度拉伸 ...

方法一： align-self（解决父元素下面单个子元素布局方式） 父级加上 子元素 这种方法仅仅适应于外层元素中只包含一个子元素，或者子元素是独占一行的，因为这个时候对子元素进行设置宽度是无效的,设置了 flex-grow: 1；会是如下的效果 ...

在flex布局下，不可直接将padding值如同margin一样设置： 👇这是不正确的写法 解读：开发者本意是想将box左右居中显示，但是这样会导致box右边无法居中，根源在于使用了padding: 0 40rpx； 👇正确示范 不知道原因，但是这样的确 ...