關於彈性盒flex布局overflow無作用問題

2021-10-25 21:22:18 字數 748 閱讀 5949

flex彈性盒較為方便，可以節省我們很多布局時間，但是有時候可能會出現一點問題

>


//布局


>


<


/div>


>


>


<


/div>


>


>


<


/div>


<


/div>


<


/div>


<


/div>


<


/div>
css

.main_box 


.right_box 


.right_main }}


}}
經過層層的彈性盒自適應布局，最終我給了類名為scroll_box的div內容超出滾動的樣式，但是會發現並沒有作用，內容超出時還是會讓整個布局進行滾動而不是在我想要的區域滾動，這時候**我給其父級自適應的盒子新增height：1px,**這樣才達到我想要的效果。包括有時我們彈性盒左邊固定寬度，右邊自適應，但是布局會超出寬度也有可能是這個問題，可以試著給橫向布局自適應的盒子新增width：1px

.right_main 


}}
同時注意：彈性盒不能和滾動共存，也就是說當乙個盒子有display：flex屬性時 不要使用overflow，真想新增的話可以在彈性盒裡寫乙個子盒子，然後給這個子盒子新增obverflow

彈性盒模型布局（FLEX布局）

display flex 新增在伸縮容器 父元素的 flex direction 伸縮布局方向 row 左向右 row reverse 水平返向 column 上向下 column reverse flex wrap 換行 nowrap不換行 預設值 wrap 換行 超出才換行，不超出不換行 wra...

flex彈性盒布局（layout）

1.布局的傳統解決方案，基於盒狀模型，依賴 display屬性 position屬性 float 屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。2.2009年，w3c提出了一種新的方案 flex布局，可以簡便 完整 響應式地實現各種頁面布局。3.已經得到了所有瀏覽器的支援 4.fl...

彈性盒模型，flex布局

彈性盒子是css3的一種新布局模式，由容器 父元素 和專案 子元素 組成。彈性盒子是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒模型的目的 提供一種更加有效的方式來對乙個容器中的子元素進行排列 對齊和分配空白區間。設定彈性盒子 display flex或...