flex布局，子元素寬度不符合預期

Coly 發(fā)布于2019-08-29 17:27 / 1692人閱讀

摘要：預期子元素內容不同，但是希望子元素平均分成三份遇到的問題實際上每個子元素會根據內容寬度的不同而不平均分配代碼文字文字文字文字文字文字文字文字文字文字文字文字解決方案給每個子元素的寬度設置為就解決這個問題啦并且這個解決方案也適合在

預期

子元素內容不同，但是希望子元素平均分成三份：

遇到的問題

實際上每個子元素會根據內容寬度的不同而不平均分配：

代碼:


    
      文字文字文字
    
    
      文字文字文字文字文字文字文字文字文字
    
    
      888373773

      .box{
        display: flex;
      }
      .child{
        height: 300px;
      }
      .child1{
        flex-grow: 1;
        background-color: #0f0;
      }
      .child2{
        flex-grow: 1;
        background-color: #f00;
      }
      .child3{
        flex-grow: 1;
        background-color: #fff000;
      }

解決方案

給每個子元素的寬度設置為0:

      .child{
        height: 300px;
        width: 0;
      }

就解決這個問題啦?。。。?！

并且這個解決方案也適合在flex布局中，overflow失效的情況！

原理

不太清楚，待更新.....

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114337.html

【CSS練習】IT修真院--練習5-護工個人界面

摘要：任務五一個最常見的移動端頁面完成的事情學習張鑫旭世界相關章節(jié)張鑫旭系列了解通配符選擇器性能優(yōu)化瀏覽器渲染原理學習各屬性及效果完成任務五學習編碼規(guī)范編碼規(guī)范并按照編碼規(guī)范優(yōu)化代碼完成深度思考計劃的事情找時間把前面任務的官方提供鏈接過一遍，查缺任務五、一個最常見的移動端頁面完成的事情 float學習張鑫旭《CSS世界》相關章節(jié) 張鑫旭 float系列了解CSS通配符 &...

Jonathan Shieber 2019-08-29 15:42 評論0 收藏0
flex布局的元素如何分配容器的剩余空間

摘要：三個元素會從左往右占據父元素的空間這很顯然。左右側邊欄的寬度都是，中間元素的寬度將會占據元素的剩余寬度。同樣會導致父元素有部分剩余空間沒有分配。自從開始開學習 CSS 布局，想要比較靈活的把父元素的空間分配給各個子元一直是各個前端程序員的夢想。在 flex 之前，如果不是專門去搜索相關的解決方案，一般人幾乎想不出非常靈活的三（多）欄等高布局方案，而即使看了解決方案，很多人也會大呼奇技...

ethernet 2019-08-30 15:44 評論0 收藏0
寫給 Android 開發(fā)的小程序布局指南，Flex 布局！

摘要：不過在小程序中，這就不是我們需要考慮的了，微信已經幫我們處理好了。而在新手階段，暫時只需要關注兩個參數指定一個塊級布局，它其內的元素，總是起一個新行來顯示，而微信小程序的很多視圖容器組件，默認的就是，例如等。 showImg(https://segmentfault.com/img/remote/1460000015285633?w=750&h=562); 一、序 Hi，大家好，我是承...

Salamander 2019-08-29 15:43 評論0 收藏0
CSS: 潛藏著的BFC

摘要：而就潛藏在其中，當你修改樣式時，一不小心就能觸發(fā)它而毫無察覺，因此沒有意識到的神奇之處。實例解決侵占浮動元素的問題我們知道浮動元素會脫離文檔流，然后浮蓋在文檔流元素上。在寫樣式時，往往是添加了一個樣式，又或者是修改了某個屬性，就達到了我們的預期。而BFC就潛藏在其中，當你修改樣式時，一不小心就能觸發(fā)它而毫無察覺，因此沒有意識到BFC的神奇之處。一、什么是BFC（Block Form...

learn_shifeng 2019-08-29 13:54 評論0 收藏0
flex-item屬性之flex-grow、flex-shrink了解下

摘要：容器仍然是，灰灰，小橘，需要一起減掉才可以。但是灰灰和小橘的瘦身能力明顯不一樣，他們設置了不同的，分別為和。瘦掉的這需要平分到灰灰加上小橘身上的每一個上。前言 flex布局，想必css江湖上的各位俠士都用得很多了，那我們今天就來說說flex-item下的幾個不太常用的屬性吧（其實是鄙人用的不多（┬＿┬）而已啦，好奇了解了下）。從容貌上來看，grow，shrink，grow，shri...

Simon_Zhou 2019-08-30 15:47 評論0 收藏0