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； 👇正確示范 不知道原因，但是這樣的確 ...