flex 是個好東西，可以幫助我們解決一般情況下布局問題，作為css3的屬性特別適合用於解決一維的布局情況，比如實現 左邊固定，右邊自適應; 中間固定，兩邊自適應; 右邊固定， 左邊自適應, 左右高度同步等情景。
今天要講一下flex 下width的設定的一些情況，
預設情況下，flex-basis 是用於設定元素的基本寬度，flex-shrink 用於設定元素的寬度縮小， flex-grow 用於設定元素的寬度的擴張。當兩個元素同時設定flex-grow的值時， 會根據其值的比例來分配寬度值，flex-shrink 同理
元素a有width
元素a無width
元素b有width
元素b無width
元素a有flex
以width為標準
兩個元素都沒有width時以flex為標準
以width為標準
兩個元素都沒有width時以flex為標準
元素a無flex
同上同上
同上同上
元素b有flex
同上同上
同上同上
元素b無flex
同上同上
同上同上
總結一下：
當有乙個元素設定了width, 則flex的設定失效, 設定為flex的元素 依據 被動寬度或者文字寬度設定寬度值
當兩個元素都設定了width，flex的設定失效，以最大width最大值為依據，另乙個元素設定為被動寬度
當乙個元素設定了flex, 以flex規則去設定width值，另乙個元素設定文字寬度值
有例外情況，上面講到子元素可以簡單的理解為flex-block，這是在子元素未設定其他值的情況下，如果子元素設定為table/ inline-table, 則子元素的寬度不受flex影響，inline-table / table 的寬度不能設定width來指定， 但是flex的設定依然生效。
特別注意： flex 下， 子元素width: 100%的情況，適用於上面列舉的情況。
table/ inline-table 與 table-cell 配合使用的情況：
同樣width: 100%異常的情況還有display: table / inline-table, 在有子元素是display: table-cell的情況下， 另外的子元素width: 100%時並不能拿到父元素的100%寬度， 其寬度的計算是根據其他子元素的文字寬度(或者設定的width值)相減得到的。
aa2
display: flex;
width: 200px;
}.table-cell
.inner-table-cell
.inner-table-cell2
.sibling
flex 的例子
sibling
display: flex;
width: 200px;
}.sibling
.inline
首次編輯時間2020-10-30
DIV設定最小高度
本文和大家重點討論一下如何控制div最小高度又div自適高度問題，如果我們需要設定乙個div高度，當裡面的東西超過這個高度時，讓這個容器自動被撐開，也就是div自適應高度。當裡面的資訊很少時候，我們就設定它乙個最小的固定高度。如何控制div最小高度又div自適高度 我們在用div布局的時候經常會遇到...
設定div 高度 總結
如果將div 的height 設定為固定的畫素值，在不同解析度的顯示屏上，會看到 div 在瀏覽器上的高度不一致。可以以百分比的形式設定 div 的高度。注意，這個百分比是針對 div 的上一層標籤而言的，如果當前 div的上一層標籤的 height 為 100px 那麼當前標籤設定 hight 為...
div高度設定100 無效的問題
今天寫頁面碰到了乙個問題，div設定高度100 無效，於是進行檢查。首先想到的是div父容器沒有高度，於是檢查父容器高度，通過谷歌開發者工具發現，父容器高度正常，那為什麼元素高度無效呢。然後我試著給父容器設定乙個固定的高度，發現元素高度100 居然有效了，這是什麼操作。廢了半天勁，突然想到我的父容器...